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

本文是小编实现的一个简单的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实现点击弹出背景变暗遮罩效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    js代码:  css代码: 复制代码 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }

  • jQuery实现鼠标滑过遮罩并高亮显示效果

    复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标滑过遮罩高亮效果</title> <style> *{padding:0;margin:0;} ul,li

  • jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="c

  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • jQuery实现鼠标经过图片变亮其他变暗效果

    以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

  • jQuery插件jFade实现鼠标经过的图片高亮其它变暗

    今天为大家带来一款鼠标经过当前高亮其它变暗jQuery插件jFade,此款插件能实现的功能简单而且很实用,当鼠标经过图片列表或是文字列表时悬停当前高亮显示,其它图片列表变暗突出显示鼠标当前悬停. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法

    本文实例讲述了jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法.分享给大家供大家参考.具体如下: 鼠标滑向当前图片高亮显示,其它图片变灰 这个 网页特效一些商城经常用到比如淘宝,当用户鼠标移到某一个图片时候变亮 周围图片变灰,形成对比增加用户体验 这个jquery特效的原理是:鼠标滑过当前元素,找到他的同辈元素i,并为它加上opacity_bg类,鼠标移出当前元素,到他的同辈元素i,并移除它加上opacity_bg类景 核心js代码如下: $(document).ready(fun

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

    本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容. js代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(&

  • Js点击弹出下拉菜单效果实例

    复制代码 代码如下: <STYLE type=text/css> .menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:

  • jQuery中ztree 点击文本框弹出下拉框的实例代码

    废话不多说了,具体代码如下所示: <link rel="stylesheet" href="${ctx}/res/js/ztree/css/demo.css" type="text/css"/> <link rel="stylesheet" href="${ctx}/res/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/cs

  • jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code

  • jquery实现点击弹出对话框

    本文实例为大家分享了jquery实现点击弹出对话框的具体代码,供大家参考,具体内容如下 1.html里面隐藏好一个div <div class="dialog" id="delallpartdialog"> <div class="title"> <img alt="点击可以关闭" src="/static/images/disk.png" width="30px&q

  • Android 自定义弹出菜单和对话框功能实例代码

    Android 开发当中,可能会存在许多自定义布局的需求,比如自定义弹出菜单(popupWindow),以及自定义对话框(Dialog). 话不多说,直接上图片. 先讲第一种,自定义PopUpWindow 1.popupWindow protected void showPopWindow(View view, final int pos){ WindowManager wm= (WindowManager) myContext.getSystemService(Context.WINDOW_S

  • jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

  • jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)

    本文实例讲述了jquery点击弹出可放大居中关闭对话框.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • 基于jQuery实现点击弹出层实例代码

    jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit

  • jQuery+html5实现div弹出层并遮罩背景

    渐入弹窗,背景变色不可点击.查看效果:http://runjs.cn/detail/t08gmoij <!doctype html> <html> <head> <meta charset="utf-8"> <title>popup</title> <script type="text/javascript" src="jquery-2.1.3.min.js">&

随机推荐