您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)jquery實(shí)現(xiàn)點(diǎn)擊空白處隱藏元素的方法,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
我們?cè)诰W(wǎng)站開發(fā)的時(shí)候經(jīng)常會(huì)有點(diǎn)擊空白處去隱藏已有的元素,DIV或者其他,本次教給大家如何用jquery實(shí)現(xiàn)這個(gè)特效的方法。
一款jQuery點(diǎn)擊空白處隱藏彈出層網(wǎng)頁(yè)特效,點(diǎn)擊按鈕彈出層、點(diǎn)擊頁(yè)面空白處彈出層消失JS代碼。主要功能是點(diǎn)擊按鈕彈出層顯示,然后通過點(diǎn)擊頁(yè)面任意位置都能關(guān)閉彈出層顯示效果,主要是$(document).click的操作應(yīng)用。演示 Demo,效果源碼:
CSS代碼:
* { padding: 0; margin: 0; } #btnShow{ margin: 100px auto 0; width: 90px; display: block; } #divTop{ border: 2px solid #666666; position: absolute; display: none; width: 400px; height: 200px; color: #333; background: #efefef; padding-top: 10px; text-align: center; font: 16px/30px "微軟雅黑"; margin-top: -105px; margin-left: -200px; left: 50%; top: 50%; }
JS代碼:
$(function () { $('#btnShow').click(function (event) { //取消事件冒泡 event.stopPropagation(); //按鈕的toggle,如果div是可見的,點(diǎn)擊按鈕切換為隱藏的;如果是隱藏的,切換為可見的。 $('#divTop').toggle('slow'); return false; }); //點(diǎn)擊空白處隱藏彈出層,下面為滑動(dòng)消失效果和淡出消失效果。 $(document).click(function(event){ var _con = $('#divTop'); // 設(shè)置目標(biāo)區(qū)域 if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1 //$('#divTop').slideUp('slow'); //滑動(dòng)消失 $('#divTop').hide(1000); //淡出消失 } }); })
HTML代碼:
<body> <input type="button" id="btnShow" value="彈出框按鈕" /> <div id="divTop"> 點(diǎn)擊空白區(qū)域彈出層關(guān)閉! </div> </body>
經(jīng)過測(cè)試,在移動(dòng)端Iphone手機(jī)上點(diǎn)擊頁(yè)面空白處彈出層關(guān)閉失效,不支持document寫法,解決方案:可以添加一個(gè)背景層作為頁(yè)面空白對(duì)象處理。
點(diǎn)擊空白處隱藏彈出層案例二:
<!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> <title>點(diǎn)擊空白處關(guān)閉彈出層</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #box{width:300px;height:200px;border:1px solid #000;display:none;} .btn{color:red;} </style> <script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".btn").click(function(event){ var e=window.event || event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } $("#box").show(); }); $("#box").click(function(event){ var e=window.event || event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } }); document.onclick = function(){ $("#box").hide(); }; }) </script> </head> <body> <div id="box"></div> <span class="btn">點(diǎn)擊此處打開彈出層</span><br>點(diǎn)擊空白處關(guān)閉彈出層 </body> </html>
在給大家分享一下js實(shí)現(xiàn)的點(diǎn)擊div區(qū)域外隱藏div區(qū)域的方法代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script> <title></title> </head> <style type="text/css"> body { background-color:#999999; } #myDiv { background-color:#FFFFFF; width:250px; height:250px; display:none; } </style> <body> <input id="btn" type="button" value="顯示DIV" /> <div id="myDiv"> This is a div; </div> </body> <script type="text/javascript"> var myDiv = $("#myDiv"); $(function () { $("#btn").click(function (event) { showDiv();//調(diào)用顯示DIV方法 $(document).one("click", function () {//對(duì)document綁定一個(gè)影藏Div方法 $(myDiv).hide(); }); event.stopPropagation();//阻止事件向上冒泡 }); $(myDiv).click(function (event) { event.stopPropagation();//阻止事件向上冒泡 }); }); function showDiv() { $(myDiv).fadeIn(); } </script>
關(guān)于“jquery實(shí)現(xiàn)點(diǎn)擊空白處隱藏元素的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。