一个简单遮罩弹窗效果

<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

总结

以上是生活随笔为你收集整理的一个简单遮罩弹窗效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。