jQuery实现简单弹窗遮罩效果

效果图：

图(1)初始图

图(2)点击按钮后

代码如下：

！DOCTYPE HTMl HTMl head meta charset=' UTF-8 '/title/title style # mask { position : absolute；top : 0；左： 0；宽度： 100%;高度： 100%;z指数： 999；背景技术： # 666;opa city 3360 0.5 filter : alpha(不透明度=50)-moz-opa市3360 0.5；显示器：无；} .弹出{位置：绝对值；左侧： 50%;宽度： 600像素；高度： 200像素；背景# fffz-index : 1000；border: 1px固体# 333;显示器：无；} .BTN _关闭{位置：绝对；top : 5pxright : 5px }/样式/头身按钮class='btn_show '遮罩层/button div id=' mask '/div div class=' popup ' button class=' BTN _ close ' x/button/div脚本src=' http :http://cdn。bootscs。com/jquery/3。1 .1/jquery。js /脚本脚本$(函数(){ $().BTN秀' .单击(函数(){ $('#mask ')).css({ display: 'block '，height: $(document).height() }) var $Popup=$(' .popup’)；$ Popup . CSS({ left :($(“body”)).width() - $Popup.width())/2 'px '，top: ($(window).高度()-$ Popup。高度())/2美元(窗户).scrollTop() 'px '，display: 'block' }) }) $(' .BTN _克洛斯' .单击(function() { $('#mask，弹出式菜单').css('display '，' none ')；})})/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！