基于jQuery實現(xiàn)點擊彈出層實例代碼
更新時間：2016年01月01日 10:26:51 作者：gogoggo
基于jquery實現(xiàn)點擊鏈接彈出層效果，其基本實現(xiàn)原理是這樣的：jquery操作DOM元素。對層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；對jq點擊彈出層相關(guān)知識感興趣的朋友一起學(xué)習吧
jquery實現(xiàn)點擊鏈接彈出層效果：本例實現(xiàn)的主要原理：jquery操作DOM元素。對層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；
代碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.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="#">出來層</a> </div>
<div id="divobj"></div>
</div>
</form>
</body>
</html>
以上代碼中，點擊鏈接可以彈出隱藏的層，再點擊任何地方就可以隱藏此層。
本段代碼簡單易懂，寫的不好還請各位大俠見諒，希望本文分享能夠給大家?guī)韼椭?/p>
您可能感興趣的文章:
- jquery實現(xiàn)點擊彈出帶標題欄的彈出層(從右上角飛入)效果
- jquery原創(chuàng)彈出層折疊效果點擊折疊彈出一個層
- jquery實現(xiàn)點擊彈出層效果的簡單實例
- Jquery利用mouseenter和mouseleave實現(xiàn)鼠標經(jīng)過彈出層且可以點擊
- 點擊彈出層效果&彈出窗口后網(wǎng)頁背景變暗效果的實現(xiàn)代碼
- jQuery點擊自身以外地方關(guān)閉彈出層的簡單實例
- js 點擊頁面其他地方關(guān)閉彈出層(示例代碼)
- 點擊彈出層外區(qū)域關(guān)閉彈出層jquery特效示例
- JavaScript 點擊頁面上的按紐，彈出層，背景變灰
- js點擊任意區(qū)域彈出層消失實現(xiàn)代碼
相關(guān)文章
通過JQuery將DIV的滾動條滾動到指定的位置方便自動定位
本文為大家介紹下將DIV的滾動條滾動到其子元素所在的位置，方便自動定位,需要的朋友可以參考下2014-05-05
本節(jié)主要介紹了jquery如何獲取一個元素下面相同子元素的個數(shù)代碼,需要的朋友可以參考下2014-07-07
jquery把int類型轉(zhuǎn)換成字符串類型的方法
下面小編就為大家?guī)硪黄猨query把int類型轉(zhuǎn)換成字符串類型的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
最近看了下jQuery的源代碼,其中關(guān)于CSS及className的操作思想確實很不錯,值得借鑒,下面這篇文章主要給大家介紹了關(guān)于jQuery操作css方法的超全用法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了jquery插件corner實現(xiàn)圓角邊框的方法,實例分析了jQuery插件corner的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)鼠標移入顯示蒙版效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
下面小編就為大家?guī)硪黄昝繨Query圖片切換效果的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
基于jQuery實現(xiàn)表格內(nèi)容的篩選功能
這篇文章主要介紹了基于jQuery實現(xiàn)表格內(nèi)容的篩選功能的相關(guān)資料,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了使用veloticy-ui生成文字動畫效果及基本使用方法,需要的朋友可以參考下2018-02-02
鋒利的jQuery 要點歸納（二）上 jQuery中的DOM操作，需要的朋友可以參考下。2010-03-03