Example of using jQuery to achieve click pop-up background darkening mask effect

This article is a simple jquery click pop-up background darkening mask effect implemented by the editor, and the effect of hiding the pop-up layer when clicking on the blank space is very good. The editor only posted it for everyone. The key code is here, you can add content appropriately according to your personal needs.
js code is as follows:

<script type="text/javascript">
 $(document).ready(function(){
 $(".tkyy").click(function(event){
    event.stopPropagation(); //停止事件冒泡
   $(".marsk-container").toggle();
 });
 //点击空白处隐藏弹出层
   $("body").click(function(event){
     var _con = $(&#39;.tkyy_con&#39;);  // 设置目标区域
     if(!_con.is(event.target) && _con.has(event.target).length ==0){ 
      $(&#39;.marsk-container&#39;).hide();     //淡出消失
     }
  });
 
});
</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:

<p class="tkyy"><span class="mui-icon mui-icon-arrowdown"></span>请选择退款类型 </p>
          <p class="marsk-container">
            <p class="tkyy_con">
            <p class="mui-input-row mui-radio ">
              <label>退运费</label>
              <input name="radio" type="radio" checked>
            </p>
            <p class="mui-input-row mui-radio ">
              <label>收到商品破损</label>
              <input name="radio" type="radio" checked>
            </p>
            <p class="mui-input-row mui-radio ">
              <label>少件/漏发</label>
              <input name="radio" type="radio" checked>
            </p>
            <p class="mui-input-row mui-radio ">
              <label>商品需要维修</label>
              <input name="radio" type="radio" checked>
            </p>
            <p class="mui-input-row mui-radio ">
              <label>发票问题</label>
              <input name="radio" type="radio" checked>
            </p>
            <p class="mui-input-row mui-radio ">
              <label>收到商品与描述不符</label>
              <input name="radio" type="radio" checked>
            </p>
            <p class="mui-input-row mui-radio ">
              <label>商品质量问题</label>
              <input name="radio" type="radio" checked>
            </p>
            <p class="mui-input-row mui-radio ">
              <label>描述问题</label>
              <input name="radio" type="radio" checked>
            </p>
          </p>
          </p>

The effect is as shown:

The above is the detailed content of Example of using jQuery to achieve click pop-up background darkening mask effect. For more information, please follow other related articles on the PHP Chinese website!