一个简单遮罩弹窗效果
<script>
$(document).ready(function(){
//
$(".n_ordinfo").hide();
$("#ordsure").click(function(){
$(".n_ordinfo").show();
//獲取鼠標(biāo)滾動(dòng)高度
var $scrolhei=$(document).scrollTop();
//點(diǎn)擊后添加div元素并設(shè)置其為絕對(duì)定位
$("<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元素超出部分不可移動(dòng)
$("body").css({"overflow":"hidden"});
//點(diǎn)擊按鈕刪除事件,這里刪除去父元素
$("<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>
轉(zhuǎn)載于:https://www.cnblogs.com/lvlina/p/7581675.html
總結(jié)
以上是生活随笔為你收集整理的一个简单遮罩弹窗效果的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: TabLayout+ViewPager更
- 下一篇: 全文本搜索