- 首先写一个遮罩层div,然后再写一个弹窗的div
<!-- 遮罩层 -->
<div id="cover" class="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2;
"></div>
<!-- 平台操作手册 -->
<div id="operationDiv" class="operationDiv">...</div>
2. js代码
<script type="text/javascript"> // 弹窗
function showOperatinManualDiv(){
$(‘#operationDiv‘).show(); //显示弹窗
$(‘#cover‘).css(‘display‘,‘block‘); //显示遮罩层
$(‘#cover‘).css(‘height‘,$(window).height()+‘px‘); //设置遮罩层的高度为当前页面(浏览器可见区域)的高度
}
// 关闭弹窗 function showOperationDiv(){
$(‘#operationDiv‘).hide(); //隐藏弹窗
$(‘#cover‘).css(‘display‘,‘none‘); //隐藏遮罩层
}</script>
3. 效果截图
参考博文:点这里