html:
<button onclick=""bombClick()" >点击弹框</button>
<div id="bombContain"></div>
<div id="bomb_div"></div>
css:
#bombContain{
z-index: 199412204822//z-index只有在定位元素上生效，默认值static是没有定位的
background-color:#000
opacity:0.6
top:0
left:0
width:100%
height:100%
position:fixed
display:none
}
#bomb_div{
z-index:199412204822
width:34%
height:450px
top:66px
left:36%
margin:0
padding:0
background-color:#fff
box-shadow:1px 1px 50px rgba(0,0,0,.3)
position:fixed
display:none
}
js:
function bombClick(){
$("#bombContain").css("display","block")
$("#bomb_div").css("display","block")
}
要实现点击HTML页面中的<area>区域弹出框，可以使用JavaScript和CSS结合实现。首先，在HTML中定义<area>标签和对应的<div>标签用于展示弹出框，如下：
<map name="myMap">
<area shape="rect" coords="0,0,50,50" onclick="showPopup()" />
<!-- 定义多个 <area>区域 -->
</map>
<div id="popup" style="display:none">
<!-- 定义弹出框内容 -->
</div>
然后在JavaScript中实现showPopup()函数，用于弹出对应的弹出框：
function showPopup() {
document.getElementById("popup").style.display = "block"
}
最后，使用CSS对弹出框进行样式设置，如设置弹出框的位置、大小、背景颜色等，可以使用position: absolute设置绝对定位，以便使弹出框出现在对应的<area>区域上方。
#popup {
position: absolute
top: 100px
left: 100px
width: 200px
height: 200px
background-color: #ffffff
border: 1px solid #cccccc
padding: 10px
}
这样，当用户点击HTML页面中的<area>区域时，就会触发showPopup()函数弹出对应的弹出框。
