溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“前端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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
