我如何使这个弹出式代码弹出50%一个网站和50%另一个网站？

<!-- 弹出窗口的HTML结构 -->
<div id="popup">
  <h2>弹出窗口标题</h2>
  <p>弹出窗口内容</p>
</div>

<!-- 触发弹出窗口的按钮 -->
<button id="popupButton">点击弹出窗口</button>

/* 弹出窗口的样式 */
#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}

/* 按钮样式 */
#popupButton {
  margin-top: 20px;
}

// 弹出窗口显示函数
function showPopup() {
  document.getElementById('popup').style.display = 'block';
}

// 弹出窗口隐藏函数
function hidePopup() {
  document.getElementById('popup').style.display = 'none';
}

// 触发弹出窗口的按钮点击事件
document.getElementById('popupButton').addEventListener('click', showPopup);

// 点击弹出窗口外部区域时，隐藏弹出窗口
document.addEventListener('click', function(event) {
  if (event.target !== document.getElementById('popup') && event.target !== document.getElementById('popupButton')) {
    hidePopup();
  }
});