jquery Implementation Click Pop-up background darken mask effect instance code _jquery

This article is a small series of the implementation of a simple jquery click Pop-up background darken mask effect, and click on the white space to hide the effect of the pop-up layer, the effect is very good, small series only to put out the key code, we can according to individual needs appropriate to add content.

The JS code is as follows:

 <script type= "Text/javascript" >
 $ (document). Ready (function () {
 $ (". Tkyy"). Click (Function (event) {
    event.stoppropagation ();//Stop event bubbling
   $ (". Marsk-container"). Toggle ();
 });
 Click on the white space to hide the pop-up layer
   $ ("Body"). Click (Function (event) {
     var _con = $ ('. Tkyy_con ');  Set the target area
     if (!_con.is (event.target) && _con.has (event.target). Length ==0) { 
      $ ('. Marsk-container ') . Hide ();     Fade Out
     }
  }
); </script>

CSS code:

Marsk-container{background: #FFFFFF; display:none;position:absolute;position:fixed; top:0; right:0; left:0; bottom: 0px; Background:rgba (0,0,0,.5); Z-index:10; }

HTML code:

 <div class= "Tkyy" ><span class= "Mui-icon mui-icon-arrowdown" ></span> Please select refund type </div> < Div class= "Marsk-container" > <div class= "Tkyy_con" > <div class= "Mui-input-row Mui-radi
            O "> <label> refund Freight </label> <input name=" Radio "type=" Radio "checked> 
              </div> <div class= "Mui-input-row mui-radio" > <label> receipt of product breakage </label> <input name= "Radio" type= "Radio" checked> </div> <div class= "Mui-inp Ut-row Mui-radio "> <label> less parts/leaks </label> <input name=" Radio "type=" Radio "ch ecked> </div> <div class= "Mui-input-row mui-radio" > <label> product needs To repair </label> <input name= "Radio" type= "Radio" checked> </div> <d IV class= "Mui-input-rowMui-radio "> <label> Invoice Issues </label> <input name=" Radio "type=" Radio "Checked&gt
            ;
              </div> <div class= "Mui-input-row mui-radio" > <label> receipt of Goods and description not match </label> <input name= "Radio" type= "Radio" checked> </div> <div class= "Mui-input -row Mui-radio "> <label> commodity quality issues </label> <input name=" Radio "type=" Radio "Che cked> </div> <div class= "Mui-input-row mui-radio" > <label> description Issues </label> <input name= "Radio" type= "Radio" checked> </div> &LT;/DIV&G
          T   </div>

Effect as shown:

The above is a small set of jquery to introduce the realization of the click of the pop-up background darkened mask effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!