Home > Web Front-end > JS Tutorial > body text

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

怪我咯
Release: 2017-03-31 09:26:43
Original
1704 people have browsed it

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>
Copy after login

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; }
Copy after login

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>
Copy after login

The effect is as shown:

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!