技术库 > jQuery

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

技术库:tec.5lulu.com

from:tec.5lulu.com

实现了点击空白处隐藏弹出层效果。

js代码如下:

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

css代码: 

.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代码:

 <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>    

效果如图:

jquery点击弹出背景变暗遮罩效果,by 5lulu.com

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


标签: js css javascript jquery 事件本文链接 http://tec.5lulu.com/detail/102psn21a2nsr8t82.html

我来评分 :6.1
0

转载注明:转自5lulu技术库

本站遵循:署名-非商业性使用-禁止演绎 3.0 共享协议

www.5lulu.com