自定義遮罩層 CSS+Jquery

 

   var show_div = 'MyDiv'; //遮罩div的id 

                //彈出隱藏層 

              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是要指定的div的id，在該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; 

        }