jquery Mask Layer display img

If you click an image in the IFrame to display the mask layer for the entire page, refer to the following:

http://blog.csdn.net/shiaijuan1/article/details/70160714

The concrete idea is that the top layer adds DOM objects, which are used to display information, are hidden by default, are called in the IFrame when needed, and the width height is set to 100%.

The implementation is as follows:

//Mask layer. Showmask{position:fixed;Z-index: About;width:100%;Height:100%;Background-color:Silver;Top:0px; Left:0px;Opacity:0.5; }. Showmasklayer{position:Absolute;Z-index:168;Top:0px; Left:0px;Min-width:100%;Min-height:100%;Display:Flex;justify-content:Center;Align-items:Center; }//Close button. Showmaskclose{Background-color:Red;Color: White;Border:2px solid Gray;position:fixed;Z-index:288;Top:0px; Right:0px;cursor:Pointer;Height:30px;width:30px;font-size:Large;Font-weight:Bold;text-align:Center;Display:Flex;justify-content:Center;Align-items:Center; }

The IFRAME is called as follows:

$(function () {        $("#image"). On ("click",function () {            //Determine if the mask layer Dom has been added            if($ (". Showmaskclose", window.top.document). length = = 0) {                //additional matte layer Dom$ ("Body", window.top.document). Append ("<div class= ' showmaskclose ' >x</div>"). Append ("<div class=" Showmask ' ></div> '). Append ("<div class= ' Showmasklayer ' ></div>")                //attaching a post-bind event$ (". Showmaskclose", Window.top.document). On ("click",function() {htshide ();}) $(". Showmask", Window.top.document). On ("DblClick",function() {htshide ();}) $(". Showmasklayer", Window.top.document). On ("DblClick",function() {htshide ();}) //Add a picture$ (". Showmasklayer", window.top.document). Append (" This. src + "'/>")            }            Else {                //Mask Layer DOM display$ (". Showmaskclose", Window.top.document). Show (); $(". Showmask", Window.top.document). Show (); $(". Showmasklayer", Window.top.document). Show (); //Toggle Picture$ (". Showmasklayer > img", window.top.document). attr (' src ', This. SRC);    }        });    }); functionhtshide () {//Mask Layer Hide$ (". Showmask", window.top.document). Hide (); $(". Showmaskclose", window.top.document). Hide (); $(". Showmasklayer", window.top.document). Hide (); }

jquery Mask Layer display img