设置弹窗遮罩的样式设置(包括:leftheigh等)

Posted 怪咖咖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了设置弹窗遮罩的样式设置(包括:leftheigh等)相关的知识,希望对你有一定的参考价值。

.zhezhao
{
    width:100%;
    background-color:#000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
    position:absolute;
    left:0px;
    top:0px;
    display:none;
    z-index:10;
}
#tanchuang
{
    position:absolute;
    width:400px;
    height:530px;
    background-color:#FFF;
    padding-top:10px;
    padding-left:20px;
    padding-right:15px;
    padding-bottom:20px;
    font-family:"微软雅黑";
    top:240px;
    z-index:80;
    display:none
}
$(".btn").click(function(){
        $(‘#tanchuang‘).css(‘display‘,‘block‘);
        $(‘.zhezhao‘).css(‘display‘,‘block‘);
        var h1 = $(document.body).outerHeight(true);
        var h = h1+"px"
        $(‘.zhezhao‘).css("height",h);
        var w0 = $(window).width(); 
        var w1 = $(‘#tanchuang‘).css(‘width‘);
        var w0 = parseInt(w0);//把字符串转化为数值
        var w1 = parseInt(w1);//把字符串转化为数值
    var w2 = (w0-w1)/2;
    var w2 = w2+"px";

    var w1 = $(‘#tanchuang‘).css(‘left‘,w2); })

 

以上是关于设置弹窗遮罩的样式设置(包括:leftheigh等)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容(包括图片)

微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容(包括图片)

mui 禁止透明背景点击关闭弹窗遮罩

el-dialog弹窗遮罩默认透明度是多少

前端:两种实现带背景遮罩的弹窗写法

2017-6-4 JQuery中的选择器和动画 弹窗遮罩