HTML图片热区弹窗实现、隐藏滚动条及模态弹窗方案咨询

1. 隐藏弹出窗口滚动条的方法 #

你现在用的Dreamweaver自带的弹窗本质是调用window.open() API，直接修改调用参数即可关闭滚动条：
找到Dreamweaver生成的弹窗调用代码，在第三个参数字符串里增加scrollbars=no配置，示例：

// 原代码可能是类似这样的
window.open("demo.html","popup","width=400,height=300")
// 修改后增加滚动条控制
window.open("demo.html","popup","width=400,height=300,scrollbars=no")

如果是弹窗内容页面本身溢出产生滚动条，给弹窗页的<body>标签添加样式即可：

body {
  overflow: hidden;
}

2. 轻量模态弹窗实现方案 #

完全不需要依赖Dreamweaver的内置行为，单页几十行代码即可实现，支持不同热区自定义弹窗内容，不会被浏览器拦截，体验远优于原生弹出窗口：

步骤1：给热区配置自定义内容 #

给每个<area>热区标签添加data-content属性存储对应弹窗文本，示例：

<map name="image-map">
  <area shape="rect" coords="34,44,270,350" data-content="区域A的详细说明文本" href="javascript:void(0)">
  <area shape="circle" coords="337,300,44" data-content="区域B的详细说明文本" href="javascript:void(0)">
  <!-- 新增热区只需要加对应data-content属性即可，无需修改其他代码 -->
</map>

步骤2：添加模态框基础结构与样式 #

直接复制到页面<body>末尾：

<div id="modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 24px; border-radius: 8px; width: 90%; max-width: 500px;">
    <span id="modal-close" style="position: absolute; top: 8px; right: 12px; font-size: 20px; cursor: pointer;">&times;</span>
    <div id="modal-text"></div>
  </div>
</div>

步骤3：添加交互逻辑 #

复制到页面任意位置的<script>标签内即可：

// 热区点击触发弹窗
document.querySelectorAll('area').forEach(area => {
  area.onclick = () => {
    document.getElementById('modal-text').textContent = area.dataset.content
    document.getElementById('modal').style.display = 'block'
  }
})
// 关闭弹窗
document.getElementById('modal-close').onclick = () => {
  document.getElementById('modal').style.display = 'none'
}
// 点击模态框背景关闭
document.getElementById('modal').onclick = (e) => {
  if (e.target === document.getElementById('modal')) {
    document.getElementById('modal').style.display = 'none'
  }
}

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