jQueryの基礎:ポップアップウィンドウのトグル

サンプルはこちら。

See the Pen Basics of jQuery – Popup toggle by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

ボタンクリックで表示・非表示を切り替えます。

HTML

<div class="content">
 <button class="toggle">ポップアップトグル</button>
</div>
<div class="popup" id="popup1">ポップアップ</div>

展開用のボタン「.toggle」とポップアップ「#popup1」を置いています。

「#popup1」のIDはフック用と考えスタイルは指定せず、「.popup」を汎用的なクラスとしてこちらにスタイル設定をしています。

JavaScript

$(function () {

  //「.toggle」クリックで「#popup1」にtoggle()実行
  $(".toggle").click(function(){
    $("#popup1").toggle();
  });

});

4行目で「.toggleがクリックされたら~」という処理を開始しています。
5行目で「#popupを対象にtoggleを実行する」という処理を行っています。

「toggle()」は、その対象が「display:none」であれば「display:block」に、またその逆も行ってくれる便利な関数です。

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。