关于点击后弹出遮罩层且居中的效果

时间：2021-03-16 20:36:50
<meta charset="UTF-8"/>
<html>
<head>
    <meta charset="utf-8">
    <style>
        *{
            padding:0;
            margin:0;
        }
        .lbOverlay{
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            zoom: 1;
            background: #484848;
            z-index: 999;
            width:100%;
            height:100%;
            filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
            -moz-opacity:0.5; /*Firefox私有，透明度50%*/
            opacity:0.5;/*其他，透明度50%*/
        }
        .hidden_pro_au {
            display:none;
            padding: 6px;
            text-align: left;
            width: 909px;
            /*height: 600px;*/
            background: white;
            overflow: auto;
            position: absolute;
            top: 150px;
            left: 0;
            z-index: 9999999
        }
        #hidden_pro_au_top {
            border-bottom: 1px solid #999999;
            padding-bottom: 24px;
        }
       #hidden_pro_au_top h2 {
            font-family: 微软雅黑;
            font-size: 30px;
            color: #333333;
        }
        #big_bottom{
            width:100%;
            margin: 0 auto;
        }
        #hidden_pro_au_bottom{
            width:600px;
            height:auto;
        margin: 0 auto;
        }
       #hidden_pro_au_bottom_top_text,
        #hidden_pro_au_bottom_bottom_text {
            font-family: 微软雅黑;
            font-size: 14px;
            color: #666;
        }

        #hidden_pro_au_bottom_top_text,
        #hidden_pro_au_bottom_bottom_text {
            font-family: 微软雅黑;
            font-size: 14px;
            color: #666;
        }
        #hidden_pro_au_bottom_img,#hidden_pro_au_bottom_img2{
            margin-top: 44px;
            margin-bottom: 44px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
<button onclick="show_box()">入口</button>

<div class="lbOverlay"  onclick="close_hidden_pro_au()"></div>
<div class="hidden_pro_au" style="padding-left: 42px" id="col1">
    <div id="hidden_pro_au_top">
        <h2 style="margin-top: 45px">这里是标题</h2>
        <p style="color:#999999;padding-top: 10px">首页/行业应用/工程案例/这里是标题</p>
    </div>
    <div id="big_bottom">
        <div id="hidden_pro_au_bottom">
            <div id="hidden_pro_au_bottom_top_text" style="margin-top: 45px">
                文字区域
            </div>
            <div id="hidden_pro_au_bottom_img">
                <img src="1.png" alt=""  style="width: 100%;height: auto"/>
            </div>
            <div id="hidden_pro_au_bottom_bottom_text">
                文字区域
            </div>
            <div id="hidden_pro_au_bottom_img2">
                <img src="1.png" alt="" style="width: 100%;height: auto"/>
            </div>
        </div>
    </div>
</div>




</body>
</html>

<script>
    //动态给遮罩层高度
    total = document.documentElement.clientHeight;
    colHeight = total-100-document.getElementById("col1").offsetTop;
    document.getElementById("col1").style.height=colHeight+"px";

    //点击后显示遮罩层
    function show_box(){
        $(".lbOverlay").css({"height":window.screen.availHeight});
        $(".lbOverlay").show();

        var st=$(document).scrollTop(); //页面滑动高度
        var objH=$(".hidden_pro_au").height();//浮动对象的高度
        var ch=$(window).height();//屏幕的高度
        var objT=Number(st)+(Number(ch)-Number(objH))/4;   //思路  浮动高度+（（屏幕高度-对象高度））/2
        $(".hidden_pro_au").css("top",objT);

        var sl=$(document).scrollLeft(); //页面滑动左移宽度
        var objW=$(".hidden_pro_au").width();//浮动对象的宽度
        var cw=$(window).width();//屏幕的宽度
        var objL=Number(sl)+(Number(cw)-Number(objW))/2; //思路  左移浮动宽度+（（屏幕宽度-对象宽度））/2
        $(".hidden_pro_au").css("left",objL);
        $(".hidden_pro_au").slideDown("20000");//这里显示方式多种效果
    }
    function close_hidden_pro_au(){
        $(".lbOverlay").hide();
        $(".hidden_pro_au").hide();
    }
</script>



标签：

相关文章