Implementation of the jquery mask layer
Last Update:2014-07-01
Source: Internet
Author: User
<span id="Label3"></p><p><p>The mask layer is actually a page element that occupies the translucent effect of the entire page, and is generally implemented with a Div. The masking layer is implemented in the page so that the user can only manipulate the contents of the pop-up window, but not the content outside the popup window.</p></p><p><p>When implemented, I used two div, a mask layer id=overlay, and a popup window Id=dialog.</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "overlay"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "dialog"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Click the pop-up window to hide the mask layer<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">a</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "show"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">href</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">="#"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Click the pop-up window<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">a</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p></p></p><p><p>With the page structure, the next thing you should do is to set the style of these page elements, make the mask layer transparent, and start with the mask layer and the pop-up layer hidden, implementing the following Css:</p></p><pre><span style="color: #800000;"><span style="color: #800000;">#overlay</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Display</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">None</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Absolute</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;"></span> left</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#000</span></span>; opacity:0.5;<span style="color: #ff0000;"><span style="color: #ff0000;">Filter</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Alpha (opacity=30)</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Z-index</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">9</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">-moz-opacity</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.5</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">-khtml-opacity</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.5</span></span>; }<span style="color: #800000;"><span style="color: #800000;">#dialog</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Display</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">None</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Absolute</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;"></span> left</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">50%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">50%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">400px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">400px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">-200px 0 0-200px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">5px solid Rgba (0,0,0,0.6)</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border-radius</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">5px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#fff</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Z-index</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;"></span> the</span>;}</pre><p><p>Note that the Z-index value of the set #dialog is higher than the #overlay, and the z-index of the #overlay is higher than the average element, so that the effect of masking the other page elements is not allowed, and the user is not permitted to manipulate anything but the popup window.</p></p><p><p>Then use jquery to implement the popup and hidden actions, the code is as Follows:</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span>$ (document). Ready (<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span>$ ("#show"). Click (<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #000000;"><span style="color: #000000;">SHOWDG ();</span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #000000;"><span style="color: #000000;"> });</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span>$ ("#dialog"). Click (<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span> <span style="color: #000000;"><span style="color: #000000;">HIDEDG ();</span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #000000;"><span style="color: #000000;"> });</span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #000000;"><span style="color: #000000;">});</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">show matte layers and pop-up windows</span></span><span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">SHOWDG () {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> one</span>$ ("#overlay"<span style="color: #000000;"><span style="color: #000000;">). Show ();</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span>$ ("#dialog"). Show (100<span style="color: #000000;"><span style="color: #000000;">);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">};</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Hide Mask layers and popup windows</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">hidedg () {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>$ ("#overlay"<span style="color: #000000;"><span style="color: #000000;">). Hide ();</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>$ ("#dialog"<span style="color: #000000;"><span style="color: #000000;">). Hide ();</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">};</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span></script></pre><p><p></p></p><p><p></p></p></span>
