快捷導(dǎo)航

基于jQuery實(shí)現(xiàn)點(diǎn)擊彈出層實(shí)例代碼

更新時(shí)間：2016年01月01日 10:26:51 作者：gogoggo

基于jquery實(shí)現(xiàn)點(diǎn)擊鏈接彈出層效果，其基本實(shí)現(xiàn)原理是這樣的：jquery操作DOM元素。對(duì)層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；對(duì)jq點(diǎn)擊彈出層相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

jquery實(shí)現(xiàn)點(diǎn)擊鏈接彈出層效果：本例實(shí)現(xiàn)的主要原理：jquery操作DOM元素。對(duì)層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；

代碼實(shí)例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.net" />
<title>子選擇器</title>
<style type="text/css">
#choice_list_district{
height:50px;
}
#tab td{
cursor:pointer;
}
#divobj{
position:absolute; 
width:200px; 
height:200px; 
background:blue; 
border:1px solid block; 
display:none; 
z-index:9999;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function (){ 
$("#choice_list_district a").click(function(e){ 
if($("#divobj").css("display")=="none"){ 
e.stopPropagation(); 
var offset=$(e.target).offset(); 
$("#divobj").css({top:offset.top+$(e.target).height()+"px",left:offset.left}); 
$("#divobj").show(); 
} 
else{ 
$("#divobj").hide(); 
} 
}); 
$(document).click(function(event){ 
$("#divobj").hide(); 
}); 
}); 
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="choice_list_district"> <a href="#">出來(lái)層</a> </div>
<div id="divobj"></div>
</div>
</form>
</body>
</html>

以上代碼中，點(diǎn)擊鏈接可以彈出隱藏的層，再點(diǎn)擊任何地方就可以隱藏此層。

本段代碼簡(jiǎn)單易懂，寫的不好還請(qǐng)各位大俠見(jiàn)諒，希望本文分享能夠給大家?guī)?lái)幫助。

您可能感興趣的文章:

相關(guān)文章

通過(guò)JQuery將DIV的滾動(dòng)條滾動(dòng)到指定的位置方便自動(dòng)定位
本文為大家介紹下將DIV的滾動(dòng)條滾動(dòng)到其子元素所在的位置，方便自動(dòng)定位,需要的朋友可以參考下
2014-05-05
jquery獲取一個(gè)元素下面相同子元素的個(gè)數(shù)代碼
本節(jié)主要介紹了jquery如何獲取一個(gè)元素下面相同子元素的個(gè)數(shù)代碼,需要的朋友可以參考下
2014-07-07
jquery把int類型轉(zhuǎn)換成字符串類型的方法
下面小編就為大家?guī)?lái)一篇jquery把int類型轉(zhuǎn)換成字符串類型的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
jQuery操作css方法的超全用法
最近看了下jQuery的源代碼,其中關(guān)于CSS及className的操作思想確實(shí)很不錯(cuò),值得借鑒,下面這篇文章主要給大家介紹了關(guān)于jQuery操作css方法的超全用法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
jquery插件corner實(shí)現(xiàn)圓角邊框的方法
這篇文章主要介紹了jquery插件corner實(shí)現(xiàn)圓角邊框的方法,實(shí)例分析了jQuery插件corner的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
完美JQuery圖片切換效果的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇完美JQuery圖片切換效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能的相關(guān)資料,需要的朋友可以參考下
2016-08-08
使用veloticy-ui生成文字動(dòng)畫效果
這篇文章主要介紹了使用veloticy-ui生成文字動(dòng)畫效果及基本使用方法,需要的朋友可以參考下
2018-02-02
鋒利的jQuery jQuery中的DOM操作
鋒利的jQuery 要點(diǎn)歸納（二）上 jQuery中的DOM操作，需要的朋友可以參考下。
2010-03-03