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

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

代碼實(shí)例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn" />
<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="#">出來層</a> </div>
<div id="divobj"></div>
</div>
</form>
</body>
</html>

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

本段代碼簡單易懂，寫的不好還請各位大俠見諒，希望本文分享能夠給大家?guī)韼椭?/p>

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)滑動開關(guān)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)滑動開關(guān)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
用jQuery實(shí)現(xiàn)的智能隱藏、滑動效果的返回頂部代碼
這篇文章主要介紹了用jQuery實(shí)現(xiàn)的智能隱藏、帶滑動效果的返回頂部代碼,非常實(shí)用,需要的朋友可以參考下
2014-03-03
jquery插件實(shí)現(xiàn)代碼雨特效
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)代碼雨特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
深入學(xué)習(xí)jQuery中的data()
大家應(yīng)該都會有這樣一種感覺，data函數(shù)在jQuery中看起來很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細(xì)一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來詳細(xì)深入的學(xué)習(xí)下jQuery中的data()，感興趣的朋友們可以參考借鑒。
2016-12-12
jQuery 動態(tài)酷效果實(shí)現(xiàn)總結(jié)
jQuery是一個優(yōu)秀的JavaScript框架，可以很好的解決不同瀏覽器兼容的問題，尤其是在ASP.NET MVC下，它的作用更加的凸顯。
2009-12-12
Jquery實(shí)現(xiàn)瀑布流布局（備有詳細(xì)注釋）
這篇文章主要介紹了Jquery實(shí)現(xiàn)瀑布流布局的方法,可實(shí)現(xiàn)圖片的動態(tài)加載功能,且代碼備有詳細(xì)注釋便于理解,需要的朋友可以參考下
2015-07-07
jquery實(shí)現(xiàn)圖片漸變切換兼容ie6/Chrome/Firefox
jquery代碼實(shí)現(xiàn)圖片漸變切換同時兼容ie6、Chrome、Firefox，想學(xué)習(xí)的朋友可以測試下，希望對大家有所幫助
2013-08-08
詳談jQuery Ajax(load,post,get,ajax)的用法
下面小編就為大家?guī)硪黄斦刯Query Ajax(load,post,get,ajax)的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
(function($){...})(jQuery)的意思
(function($){...})(jQuery)實(shí)際上是匿名函數(shù)，不懂得朋友可以繼續(xù)往下看。
2010-07-07
jquery判斷瀏覽器類型的代碼
用jquery來判斷瀏覽器類型，如果只是僅僅為了判斷瀏覽器的類型而使用該方法,那么不建議使用，只是在你已經(jīng)使用了jquery才建議使用，因?yàn)闆]必要因?yàn)檫@么小的一個功能就加載那么大的類庫吧
2012-11-11