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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
js实现秒表计时器
Dec 16 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
哈弗商学院毕业生求职信
2014/02/26 职场文书
教师远程培训感言
2014/03/06 职场文书
政风行风建设整改方案
2014/10/27 职场文书
工作试用期自我评价
2015/03/10 职场文书
研讨会致辞
2015/07/31 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript