CSS+JS 弹出窗口
需要引入样式
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
.white_content { display: none; position: absolute; top: 25%; left: 35%; width: 30%; height: 50%; padding-top: 20px;padding-left:40px; border: 1px solid orange; background-color: white; z-index:1002; overflow: auto; }
页面中的内容
<div onclick="javascript:document.getElementById(‘light‘).style.display=‘block‘;document.getElementById(‘fade‘).style.display=‘block‘">点击这里弹出窗口</div>
<div id="light" class="white_content">
<div style="width:100%;height:20px;"><img src="关闭弹出窗口图片" style="float:right;margin-right:10px" onclick="javascript:document.getElementById (‘light‘).style.display=‘none‘;document.getElementById(‘fade‘).style.display=‘none‘"/></div>
弹出窗口内容
</div>
<div id="fade" class="black_overlay">弹出窗口灰色背景</div>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。