如何制作类似Emoji Button的弹窗，点击后展示.html页面而非表情键盘

核心实现逻辑 #

你要的和现有表情弹窗完全一致的交互，只需要把弹窗内的内容替换为iframe加载目标html页面即可，核心逻辑3步：

1. 点击触发按钮时显示弹窗容器
2. 弹窗内用iframe嵌入你要展示的.html页面
3. 监听全局点击事件，判断点击目标不在弹窗和触发按钮范围内时，关闭弹窗

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <title>自定义弹窗加载HTML示例</title>
  <style>
    /* 弹窗默认隐藏 */
    .custom-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.2);
      z-index: 999;
    }
    /* 弹窗内容区域 */
    .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 800px;
      height: 80vh;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    }
    /* 加载目标页面的iframe */
    .modal-content iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <h1>自定义弹窗按钮</h1>
  <button id="open-modal-button">点击打开弹窗</button>

  <!-- 弹窗结构 -->
  <div class="custom-modal" id="customModal">
    <div class="modal-content">
      <!-- 替换成你要展示的html文件路径 -->
      <iframe src="你要加载的目标页面.html"></iframe>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const openButton = document.querySelector('#open-modal-button');
      const modal = document.querySelector('#customModal');
      const modalContent = document.querySelector('.modal-content');

      // 点击按钮显示弹窗
      openButton.addEventListener('click', function(e) {
        e.stopPropagation();
        modal.style.display = 'block';
      });

      // 点击弹窗外部关闭
      document.addEventListener('click', function(e) {
        if (!modalContent.contains(e.target) && e.target !== openButton) {
          modal.style.display = 'none';
        }
      });

      // 阻止弹窗内容区域的点击事件冒泡到外层
      modalContent.addEventListener('click', function(e) {
        e.stopPropagation();
      });
    });
  </script>
</body>
</html>

注意事项 #

• 代码里iframe的src属性替换为你实际要展示的.html文件的本地路径即可
• 可以自行调整.modal-content的宽高、位置样式，适配你需要的弹窗尺寸
• 如果要和原有emoji-button的弹窗位置完全对齐（在按钮附近弹出而非居中），只需要修改.modal-content的定位逻辑，基于触发按钮的getBoundingClientRect()获取坐标来设置top和left值即可。

内容的提问来源于stack exchange，提问作者Magnus Marks