JS center the display layer with an occlusion layer (ie, Firefox, Chrome)

Recently, one of the companies has finally ended and has become less busy for a few days. As a result, it seems that the company's predecessors wroteCode. Almost every project uses this effect, that is, when querying, a div pops up to center the DIV and a gray covering layer is displayed. Because the user is oriented to government personnel, almost only the IE or IE kernel browser is used during the test. In order to test whether the process is correct, several accounts are often used, which sometimes leads to session sharing, making the data incorrect. Therefore, I will use Firefox and find that the two JS codes are not compatible with non-ie browsers, so I wrote a little code myself (the following code uses jquery and should reference the jquery package ).

The HTML code is as follows:

   <  Div  ID  = "Testdiv"  Style  = "Position: absolute; width: 303px; Height: 100px; Background-color: yellow; display: none ;"  >          </  Div >           <  Input  Type  = "Button"  Onclick  = "Setdivatcenter ('testdiv ')"  Value  = "Click"  /  > 

The JS Code for center layer is as follows:

Function setdivatcenter (divid) {var newtop = $ (document ). height ()/2-$ ("#" + divid ). height ()/2-100; var newleft = $ (document ). width ()/2-$ ("#" + divid ). width ()/2; $ ("#" + divid;.css ("Left", newleft); $ ("#" + divid;.css ("TOP", newtop ); $ ("#" + divid ). show (); uselaymaskmodels (); // display the occlusion layer}
 

The code for displaying the occlusion layer is as follows:

 Function uselaymaskmodels () {var obj_mask = $ ("# divmask"); If (obj_mask.length! = 0) {var state = obj_mask.css ("display"); If (State = "NONE") {obj_mask.show ();} else {obj_mask.hide ();}} else {$ (document. body ). append (" <  Div  ID  = 'Vmask'  Style  = 'Left: 0px; top: 0px; width: 100%; Height: 100%; Background-color:
# B3b3b3; Z-Index =-1; position: absolute ;'  > </  Div  >  ");}} 

The following are some properties of the event, which should be useful.

Event

 The left ie button is window. Event . Button = 1  Right-click window.  Event . Button = 2  The middle key is window.  Event . Button = 4  No button action window.  Event . Button = 0  Firefox left button is  Event . Button = 0  Right-click Event . Button = 2  Key: Yes  Event . Button = 1  No button action  Event . Button = 0  Opera  7.23 / 7.54  The left mouse button is window.  Event . Button = 1  No button action window. Event . Button = 1  You cannot get opera by right-clicking or middle-clicking  7.60 / 8.0  The left mouse button is window.  Event . Button = 0  No button action window.  Event . Button = 0  Right-click and Middle-click cannot be obtained. In addition, window is blocked.  Event . Button = 3 **************************************** ******************** Window. event object represents the event state, such as the elements that trigger the event object, the location and status of the mouse, and the key to press. Window. Event objects are valid only when an event occurs. Some Properties of window. event only make sense for specific events. For example, the fromelement and toelement attributes only make sense for onmouseover and onmouseout events. If the mouse moves out of the window after the event is triggered, the returned value is - 1  This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse. Event object attributes include: altkey, button, Member, clientx, clienty, ctrlkey, fromelement, keycode, offsetx, offsety, propertyname, returnvalue, screenx, screeny, delimiter, srcelement, srcfilter, the following describes the attributes of toelement, type, X, and Y:  1  . Altkey Description: checks the status of the Alt key. Syntax:  Event  Possible value of. altkey: When the Alt key is pressed, the value is true; otherwise, the value is false. Read-only. 2  . Button Description: Check the pressed mouse key. Syntax:  Event  Possible. Button values:  0 No buttons; 1 Left click; 2 Right-click; 3 Press the left and right keys; 4 Press the intermediate key; 5 Press the left and intermediate keys; 6 Right-click and select intermediate key; 7  Press all keys. This attribute is only used for onmousedown, onmouseup, and onmousemove events. Other events, regardless of the mouse status, are returned.  0 (Such as onclick ).  3  . Cancelbubble Description: checks whether the event control of upper-layer elements is accepted. Syntax:  Event . Cancelbubble [= Cancelbubble] possible value: This is a read/write Boolean value. True is not controlled by the upper-layer event. False allows the event to be controlled by the upper-layer element. This is the default value.  4  . Clientx Description: returns the X coordinates of the mouse in the client area of the window. Syntax:  Event  . Clientx Note: This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.  5  . Clienty Description: returns the Y coordinate of the mouse in the client area of the window. Syntax:  Event . Clienty Note: This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.  6  . Ctrlkey Description: Check the ctrl key status. Syntax:  Event  Possible value of. ctrlkey: The value is true when the ctrl key is pressed; otherwise, the value is false. Read-only.  7  . Fromelement Description: the elements that the mouse leaves when the onmouseover and onmouseout events occur. Refer to 18. toelement Syntax:  Event  . Fromelement Note: This is a read-only attribute.  8  . Keycode Description: detects the internal code corresponding to the keyboard event. This attribute is used for onkeydown, onkeyup, and onkeypress events. Syntax:  Event . Keycode [=Keycode] possible value: it is a read/write value and can be any Unicode keyboard internal code. If no keyboard event is triggered, the value is  0  .  9  . Offsetx Description: checks the horizontal coordinate syntax of the mouse position relative to the trigger event object:  Event  . Offsetx  10  . Offsety Description: checks the vertical coordinate syntax of the mouse position relative to the trigger event object:  Event  . Offsety  11  . Propertyname Description: sets or returns the name of a variable attribute of an element. Syntax:  Event . Propertyname [=Sproperty] possible value: sproperty is a string that specifies or returns the name of the attribute that the element that triggers the event has changed in the event. Note: This attribute can be read and written. No default value. You can use the onpropertychange event to obtain the value of propertyname.  12  . Returnvalue Description: sets or checks the Value Syntax returned from the event:  Event . Returnvalue [= Boolean] possible values:  True  The value in the event is returned.  False  The default operation for events on the source object is canceled.  13  . Screenx Description: detects the horizontal position syntax of the mouse relative to the user's screen:  Event . Screenx Note: This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.  14  . Screeny Description: Check the vertical position of the mouse relative to the user's screen Syntax:  Event  . Screeny Note: This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.  15  . Shiftkey Description: checks the status of the shift key. Syntax:  Event  . Shiftkey value: when the shift key is pressed, the value is true; otherwise, the value is false. Read-only.  16  . Srcelement Description: return the element of the trigger event. Read-only. For examples, see the beginning of this article. Syntax:  Event  . Srcelement 17  . Srcfilter Description: return the filter that triggers the onfilterchange event. Read-only. Syntax:  Event  . Srcfilter  18  . Toelement Description: the element that the mouse enters when the onmouseover and onmouseout events occur. See 7. fromelement Syntax:  Event  . Toelement Note: This is a read-only attribute.  19  . Type description: name of the returned event. Syntax:  Event  . Type annotation: return the event name without the "on" prefix. For example, the type returned by the onclick event is click read-only.  20 . X Description: returns the X axis coordinate of the upper-level element of the position attribute relative to the CSS attribute. If there is no upper-level element with the position attribute in the CSS attribute, the body element is used as the reference object by default. Syntax:  Event  . X Note: If the mouse moves out of the window after the event is triggered, the returned value is - 1  This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.  21  . Y Description: returns the Y axis coordinate of the upper-level element of the position attribute relative to the CSS attribute. If there is no upper-level element with the position attribute in the CSS attribute, the body element is used as the reference object by default. Syntax:  Event . Y

 

 

 

The running effect is as follows: