jQuery_jquery に基づいてクリックポップアップレイヤーを実装するコード例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery_jquery に基づいてクリックポップアップレイヤーを実装するコード例

May 16, 2016 pm 03:22 PM

jquery は、リンクをクリックしたときのポップアップレイヤー効果を実現します。この例の主な原理は、jquery が DOM 要素を操作することです。レイヤースタイルの設定。 display: を none に設定します。

コード例は次のとおりです。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot; utf-8&quot;&gt;
&lt;meta name=&quot;author&quot; content=&quot;http://www.jb51.net&quot; /&gt;
&lt;title&gt;子选择器&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
#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;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;mytest/jQuery/jquery-1.8.3.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot;&gt; 
$(function (){ 
$(&quot;#choice_list_district a&quot;).click(function(e){ 
if($(&quot;#divobj&quot;).css(&quot;display&quot;)==&quot;none&quot;){ 
e.stopPropagation(); 
var offset=$(e.target).offset(); 
$(&quot;#divobj&quot;).css({top:offset.top+$(e.target).height()+&quot;px&quot;,left:offset.left}); 
$(&quot;#divobj&quot;).show(); 
} 
else{ 
$(&quot;#divobj&quot;).hide(); 
} 
}); 
$(document).click(function(event){ 
$(&quot;#divobj&quot;).hide(); 
}); 
}); 
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
&lt;div&gt;
&lt;div id=&quot;choice_list_district&quot;&gt; &lt;a href=&quot;#&quot;&gt;出来层&lt;/a&gt; &lt;/div&gt;
&lt;div id=&quot;divobj&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

上記は jQuery に基づいています。クリックポップアップレイヤーのサンプル code_jquery コンテンツを実装するには、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。