自定义遮罩层 CSS+Jquery

本文介绍了一种使用JavaScript实现遮罩层和弹窗的方法。通过获取指定元素的位置来定位遮罩层,并设置了遮罩层的显示与隐藏功能。此外还提供了调整遮罩层大小以覆盖整个页面的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

   var show_div = 'MyDiv'; //遮罩divid 

                //弹出隐藏层 

              function ShowDiv() { 

                        var showdiv = document.getElementById(show_div); 

                       if (showdiv == undefined) { 

                                return

                            } 

                        showdiv.style.width = $(document).width()+"px"

                        showdiv.style.top = $("#divList").offset().top + "px"; //divList是要指定的divid,在该div上进行遮罩 

                        showdiv.style.left = $("#divList").offset().left + "px"

                    //如果要遮罩整个页面:设置遮罩div的高:

                    showdiv.style.height= $(document).height() + "px";

                    showdiv.style.height=$(document).width() + "px";

                        //showdiv.style.height = $("#divList").height() + "px";  

                        showdiv.style.display = 'block'

                    }; 

                //关闭弹出层 

                function CloseDiv() { 

                        document.getElementById(show_div).style.display = 'none'

                    };  

        function validateInput() { 

                 ShowDiv(); 

                // __doPostBack("Button3", "");

            } 

 

 

  #MyDiv {

    background-image: url('../img/timgs.gif');

    background-repeat:no-repeat;

    background-size:100%;

    }

    .white_content

            display: none

           position: absolute

           border: 3px solid lightblue

           background-color: #CAE4F7

            z-index: 9999

           -moz-opacity: 0.5

            opacity: .50

            filter: alpha(opacity=50)

            vertical-align: middle

           top:0px

           text-align:center

        } 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值