简单的jquery点击弹出背景变暗遮罩效果

  1. 云栖社区>
  2. 博客>
  3. 正文

简单的jquery点击弹出背景变暗遮罩效果

技术小牛人 2017-11-21 18:28:00 浏览537
展开阅读全文

工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用。。。。。。只把关键代码贴出来。并实现了点击空白处隐藏弹出层效果。

js代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <script type="text/javascript">
 $(document).ready(function(){
  $(".tkyy").click(function(event){
        event.stopPropagation(); //停止事件冒泡
      $(".marsk-container").toggle();
  });
  //点击空白处隐藏弹出层
     $(".marsk-container").click(function(event){
          var _con = $('.tkyy_con');   // 设置目标区域
          if(!_con.is(event.target) && _con.has(event.target).length ==0){ 
            $('.marsk-container').hide();          //淡出消失
          }
    });
 
});
</script>

css代码:

1
.marsk-container{background#FFFFFFdisplaynone;positionabsolute;positionfixedtop0right0left0bottom0pxbackground: rgba(0,0,0,.5); z-index10;  }

html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
   <div class="tkyy"><span class="mui-icon mui-icon-arrowdown"></span>请选择退款类型 </div>
                    <div class="marsk-container">
                        <div class="tkyy_con">
                        <div class="mui-input-row mui-radio ">
                            <label>退运费</label>
                            <input name="radio" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio ">
                            <label>收到商品破损</label>
                            <input name="radio" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio ">
                            <label>少件/漏发</label>
                            <input name="radio" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio ">
                            <label>商品需要维修</label>
                            <input name="radio" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio ">
                            <label>发票问题</label>
                            <input name="radio" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio ">
                            <label>收到商品与描述不符</label>
                            <input name="radio" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio ">
                            <label>商品质量问题</label>
                            <input name="radio" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio ">
                            <label>描述问题</label>
                            <input name="radio" type="radio" checked>
                        </div>
                    </div>
                    </div>               

效果如图:

wKiom1dsk9aRMhd-AAB2_ao7twY189.png

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1792463

网友评论

登录后评论
0/500
评论
技术小牛人
+ 关注