真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

jquery實現(xiàn)點擊空白處隱藏元素的方法-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關(guān)jquery實現(xiàn)點擊空白處隱藏元素的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注骨干網(wǎng)絡(luò)服務(wù)器租用10年,服務(wù)更有保障!服務(wù)器租用,聯(lián)通機房服務(wù)器托管 成都服務(wù)器租用,成都服務(wù)器托管,骨干網(wǎng)絡(luò)帶寬,享受低延遲,高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

我們在網(wǎng)站開發(fā)的時候經(jīng)常會有點擊空白處去隱藏已有的元素,DIV或者其他,本次教給大家如何用jquery實現(xiàn)這個特效的方法。

一款jQuery點擊空白處隱藏彈出層網(wǎng)頁特效,點擊按鈕彈出層、點擊頁面空白處彈出層消失JS代碼。主要功能是點擊按鈕彈出層顯示,然后通過點擊頁面任意位置都能關(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是可見的,點擊按鈕切換為隱藏的;如果是隱藏的,切換為可見的。 
     $('#divTop').toggle('slow'); 
		 return false;
   }); 
   //點擊空白處隱藏彈出層,下面為滑動消失效果和淡出消失效果。
	 $(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');  //滑動消失
			$('#divTop').hide(1000);     //淡出消失
		 }
	});
 })

HTML代碼:




 點擊空白區(qū)域彈出層關(guān)閉!

經(jīng)過測試,在移動端Iphone手機上點擊頁面空白處彈出層關(guān)閉失效,不支持document寫法,解決方案:可以添加一個背景層作為頁面空白對象處理。

點擊空白處隱藏彈出層案例二:




點擊空白處關(guān)閉彈出層


#box{width:300px;height:200px;border:1px solid #000;display:none;}
.btn{color:red;}



$(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();
  };
})



點擊此處打開彈出層
點擊空白處關(guān)閉彈出層

在給大家分享一下js實現(xiàn)的點擊div區(qū)域外隱藏div區(qū)域的方法代碼:









body
{
background-color:#999999;
} 
#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
      }
  


 

This is a div;
        var myDiv = $("#myDiv"); $(function () { $("#btn").click(function (event)  { showDiv();//調(diào)用顯示DIV方法 $(document).one("click", function ()  {//對document綁定一個影藏Div方法 $(myDiv).hide(); });  event.stopPropagation();//阻止事件向上冒泡 }); $(myDiv).click(function (event)  { event.stopPropagation();//阻止事件向上冒泡 }); });     function showDiv()  { $(myDiv).fadeIn(); }

關(guān)于“jquery實現(xiàn)點擊空白處隱藏元素的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。


標(biāo)題名稱:jquery實現(xiàn)點擊空白處隱藏元素的方法-創(chuàng)新互聯(lián)
本文網(wǎng)址:http://weahome.cn/article/dpehph.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部