本篇内容主要讲解“前端jQuery弹框阻止冒泡代码分享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“前端jQuery弹框阻止冒泡代码分享”吧!
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>定时器弹框</title><style type="text/css">.pop_con{display: none;/*默认不显示，用定时器显示*/}.pop{width: 400px;height: 300px;background-color: #fff;border: 1px solid #000;position: fixed;/*使用固定定位*/left: 50%;/*左上角位于页面中心*/top: 50%;margin-left: -200px;/*让p向左偏移半个宽度、向上偏移半个高度，使p位于页面中心*/margin-top: -150px;z-index: 9999;/*弹窗在最前面*/}/*遮罩样式*/.mask{position: fixed;width: 100%;height: 100%;background-color: #000;left: 0;top: 0;/*设置透明度30%，兼容IE6、7、8*/opacity: 0.3;filter: alpha(opacity=30);z-index: 9990;/*遮罩在弹窗后面*/}</style><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript">$(function(){$('#btn').click(function() {$('#pop').show();return false;});$('#shutoff').click(function() {$('#pop').hide();});//点弹框以外的地方，也能让弹框消失$(document).click(function(){// setTimeout(function(){// $('#pop').hide();// },2000);$('#pop').hide();});$('.pop').click(function() {return false;});//阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）$('#link1').click(function() {return false;});})</script></head><body><h2>首页标题</h2><p>页面内容</p><a href="http://www.baidu.com" id="link1">百度网</a><input type="button" name="" value="弹出" id="btn"><p class="pop_con" id="pop"><p class="pop"><h4>提示信息！</h4><a href="#" id="shutoff">关闭</a><input type="text" name=""></p><!-- 遮罩层 --><p class="mask"></p></p></body></html>到此，相信大家对“前端jQuery弹框阻止冒泡代码分享”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
