jQuery实现点击弹出背景变暗遮罩效果实例代码


Posted in Javascript onJune 24, 2016

本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容。

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实现点击弹出背景变暗遮罩效果实例代码

以上所述是小编给大家介绍的jQuery实现点击弹出背景变暗遮罩效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 #Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 #Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 #Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 #Javascript
jQuery模仿单选按钮选中效果
Jun 24 #Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 #Javascript
jQuery如何获取动态添加的元素
Jun 24 #Javascript
You might like
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
jquery 回车事件实现代码
2011/08/23 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python回调函数用法实例详解
2015/07/02 Python
分享python数据统计的一些小技巧
2016/07/21 Python
小小聊天室Python代码实现
2016/08/17 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python移位运算的实现
2019/07/15 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
竞争上岗实施方案
2014/03/21 职场文书
法学院毕业生求职信
2014/06/25 职场文书
开服装店计划书
2014/08/15 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Oracle中日期的使用方法实例
2022/07/07 Oracle