点击按钮出现遮罩层与自定义弹窗的综合运用

第一步，先在HTML中新加一个空的div，用来做遮罩效果

<div class="mask"></div>

第二步，设置遮罩样式

.mask { position: absolute;/*定位为绝对定位*/ top: 0; left: 0; width: 100%; height: 100%; z-index: 2;/*放在第二层，将第一层内容遮住*/ background: #666; opacity: 0.5;/*透明度*/ display: none; /*先设置为none不可见 */ }

第三步，在页面加入自定义弹窗

<div class="problem-nav" id="notice"> <div class="top-nav"> <span class="notice">请注意</span> </div> <div class="certen-nav"> <div class="certen-messege"> <span class="messege"></span> </div> </div> <div class="define"> <input type="button" class="define-messege" value="确定"> </div> </div>

第四步，设置弹窗样式

.problem-nav{ position:absolute; height: 200px; width: 300px; border: 1px solid black; background-color: #fff; border-radius: 10px; display: none; margin: auto auto; z-index: 3; display: none; }

最后一步，js控制点击后弹出

$("属性").click(function(){ function problem(){ var $Popup = $('.problem-nav'); $('.mask').css("display", "block"); $Popup.css({ left: ($('body').width() - $Popup.width()) / 2 + 'px', top: ($(window).height() - $Popup.height()) / 2 + $(window).scrollTop() + 'px', display: 'block' }) $('.define-messege').click(function() { $('.mask,.problem-nav').css('display', 'none'); return false; }) } problem(); })