ホームページ > 記事 > ウェブフロントエンド > jQuery_jquery に基づいてクリック ポップアップ レイヤーを実装するコード例
jquery は、リンクをクリックしたときのポップアップ レイヤー効果を実現します。この例の主な原理は、jquery が DOM 要素を操作することです。レイヤースタイルの設定。 display: を none に設定します。
コード例は次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.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>
上記は jQuery に基づいています。クリック ポップアップ レイヤーのサンプル code_jquery コンテンツを実装するには、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。