<script>
$(document).ready(function(){
//
$(".n_ordinfo").hide();
$("#ordsure").click(function(){

$(".n_ordinfo").show();

//獲取鼠標滾動高度
var $scrolhei=$(document).scrollTop();

//點擊后添加div元素并設置其為絕對定位
$("<div id='bgwrap'></div>").appendTo("body");
$("#bgwrap").css({"width":$(window).width()+20,"height":$(window).height()+20,"background":"rgba(0,0,0,0.68)","position":"absolute","top":$scrolhei,"left":"0px"});

//body元素超出部分不可移動
$("body").css({"overflow":"hidden"});

//點擊按鈕刪除事件,這里刪除去父元素
$("<div id='btn'>X</div>").appendTo("#bgwrap");
$("#btn").css({"width":"24px","height":"24px","text-align":"center","line-height":"30px","position":"absolute","top":"8.8em","left":"80.6%","z-index":"99999","font-size":"0.14em","cursor":"pointer"});

$("#btn").click(function(){

$(this).parent().remove();
$(".n_ordinfo").hide();
$("body").css({"overflow":"scroll"});
})

})
})
</script>

轉載于:https://www.cnblogs.com/lvlina/p/7581675.html

總結

以上是生活随笔為你收集整理的一个简单遮罩弹窗效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。