Code for masking effects using jquery (Debug version)

Reference: Tao, "the authoritative guide to jquery" P107 4.8 Comprehensive case study--the application of the cue effect in the project when the data is deleted

Description: This version is a debug version because of the increased number of borders created during debugging.

External ingest files are: jquery library files and two images.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >body{Font-size:13px; }. divshow{ Line-height:32px; /*This property affects the layout of the row box. When applied to a block-level element, it defines the minimum distance, not the maximum distance, between the baselines in the element. */height:32px; Background-color: #eee;                            width:280px;                }. divshow span{border:1px Red Solid; Padding-left:50px;                }. dialog{width:360px; border:5px Solid #666; Position:absolute;/*set to absolute positioning, unknown effect*/Display:none;/**/Z-index:101;                                                                                                                                                }                . dialog. title{border:1px solid #0f0; Background-color: #fbaf15; padding:10px;/*Open up the width and height of the div*/color: #fff;/*font color is white*/Font-weight:bolder;/*Bold*/}. dialog. Title img{float: Right; }. dialog. content{Background: #fff                ; padding:25px;/*Open up and down the distance*/height:60px; }. dialog. Content img{float: Left; }. dialog. Content span{float: Left;                border:1px solid #FF0000; Padding-top:10px; Padding-left:10px; }. dialog. buttom{Background-color: #eee; Text-align:right;/*put the button on the right, too.*/padding:10px 10px 10px 0px;                }. mask{border:1px solid #0f0; Background-color: #f00;                Display:none; Width:100%; Height:100%; Position:absolute;/*when absolute positioning is set, the height fills the entire page*/top:0px;/*when absolute positioning is set, the top value is only valid*/left:0px; }                                                        </style> <script type= "Text/javascript" src= "Js/jquery-1.10.2.js" ></script> &LT;SC Ript type= "Text/javascript" >                        $(function(){                $("#button1"). Click (function(){                    $(". Mask"). Show ();                    ShowDialog (); $(". Dialog"). Show ();                                                                                }); //The Resize event occurs when the size of the browser window is resized. $ (window). Resize (function(){                    varFlag = $ (". Dialog"). Is (": Visible"); //alert (flag);                    if(!flag) {                        return; } showDialog (); //To re-display the dialog box                }); //Turn off Events (implement feature: mask layers and Dialogs disappear when you click to close the picture)$ (". Title img"). Click (function(){                    $(". Dialog"). Hide (); $(". Mask"). Hide ();                                }); //Register Cancel button click event$ ("#button3"). Click (function(){                    $(". Dialog"). Hide (); $(". Mask"). Hide ();                                }); //Register OK button click event$ ("#button2"). Click (function(){                    $(". Dialog"). Hide (); $(". Mask"). Hide (); varLength = $ ("input:checked"). length; if(length!=0){                        $(". Divshow"). Remove ();                                            }                                                        });                                    }); functionShowDialog () {varOBJW = $ (window);//Current Window                varOBJC = $ (". Dialog");//dialog Box                varBRSW = Objw.width ();//the width of the current user's browser window                varBrsH = Objw.height ();//the height of the current user's browser window                //Alert (BRSW + "," + BrsH);                varSCLL = Objw.scrollleft ();//returns the horizontal scroll bar position of the first matching element. You need to check the documentation here.                 varSCLT =Objw.scrolltop (); varCURW =objc.width (); varCurh =objc.height (); //Alert (SCLL + "," + sclt);                //Alert (CURW + "," + Curh);                                                //set the left and top margins to center the dialog box (the most critical place)                varleft = Scll + (BRSW-CURW)/2;vartop = SCLT + (BRSH-CURH)/2;Objc.css ({"Left": Left,"Top": Top}); }        </script> <meta name= "author" content= "Administrator"/> <!--date:2014-08-2 4--This is a hidden mask layer.</div> <div class= "dialog" > <!--There are three levels of Div, title layer, content Layer, button layer in the dialog box .--<div class= "title" style= "border:1px solid #f00" >  Delete prompt </div> <div class= "content" style= "border:1px solid #0f0" > <span> are you sure you want to delete this record?                </span> </div> <div class= "buttom" style= "border:1px solid #00f" >                <input type= "button" id= "Button2" value= "OK"/>&nbsp;&nbsp; <input type= "button" id= "Button3" value= "Cancel"/> </div> </div> </body> 
Code for masking effects using jquery (Debug version)