弹窗遮罩功能 

<!doctype html>
<html>
<head>
    <title></title>
    <script src="~/Content/scripts/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#tan").click(function () {
                var zhuce = $("#zhuce");
                zhuce.show();
                var top = Math.round((zhuce.height() - zhuce.find('.collect').height()) / 2);
                zhuce.find('.collect').css('margin-top', top);
            });
        })
    </script>
    <style type="text/css">
        *{margin:0;padding:0}
        .tip{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(90,90,90,.5);z-index:99999;display:none}
        .tip .collect{background:red;margin:30px auto;width:400px}
    </style>

</head>

<body>
    <a href="javascript:;" id="tan">弹出</a>

    <div class="tip" id="zhuce">
        <div class="collect">
            123123123123
        </div>
    </div>
    
</body>
</html>

　　

posted @ 2021-02-25 22:12  苦逼的猿人  阅读(71)  评论(0)    收藏  举报