ChatGPT AI 网站模板，PC端-注册按钮， 跳转链接 改成 图片弹窗，代码如下

搜索

<button id="register" class="btn border-0 p-0 s-btn-plain" onclick="window.open('app/base')">
<span class="s-color-word">注册</span>
</button>

然后替换成

<button id="register" class="btn border-0 p-0 s-btn-plain" onclick="showPopup()">
  <span class="s-color-word">注册</span>
</button>

<script>
function showPopup() {
  // 创建一个<div>元素作为弹窗容器
  var container = document.createElement('div');
  container.style.position = 'fixed';
  container.style.top = '0';
  container.style.left = '0';
  container.style.width = '100%';
  container.style.height = '100%';
  container.style.backgroundColor = 'rgba(0,0,0,0.5)';
  container.style.zIndex = '999';

  // 创建包含链接的<img>元素
  var image = document.createElement('img');
  image.src = '链接指向的图片地址';
  image.style.position = 'absolute';
  image.style.top = '50%';
  image.style.left = '50%';
  image.style.transform = 'translate(-50%,-50%)';

  // 把<img>元素添加到容器中
  container.appendChild(image);

  // 将容器添加到文档中
  document.body.appendChild(container);

  // 点击弹窗空白区域关闭弹窗
  container.onclick = function() {
    document.body.removeChild(container);
  };
}
</script>

在这段代码中控制弹窗大小可以通过设置创建的包含图片的<img>元素的CSS样式来实现。

例如，如下代码将图片设置为宽度为400像素，高度为200像素：

...
// 创建包含链接的元素
var image = document.createElement('img');
image.src = '链接指向的图片地址';
image.style.position = 'absolute';
image.style.top = '50%';
image.style.left = '50%';
image.style.transform = 'translate(-50%,-50%)';

// 设置图片的宽度和高度
image.style.width = '400px';
image.style.height = '200px';
...