一个简单遮罩弹窗效果
Posted _MAN_样
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个简单遮罩弹窗效果相关的知识，希望对你有一定的参考价值。
<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>
以上是关于一个简单遮罩弹窗效果的主要内容，如果未能解决你的问题，请参考以下文章