jQueryを使った簡単なオリジナルポップアップウィンドウの作り方

今回はjQueryを使って簡単なポップアップウィンドウを自作してみます。

ポップアップウィンドウを作るライブラリもあるみたいですが、これくらいは自分で作れるようになっておくといいと思います。

今回実装するのは「ボタンクリックでポップアップを表示させる」「closeボタンクリックでポップアップを閉じる」という機能のみです。

他の部分は自分の好きなように機能を追加すると面白いでしょう。

 

HTML

<!-- レイヤー -->
<div id="layer"></div>
<!-- ポップアップ -->
<div id="popup">
  <div>popup</div>
  <input type="button" id="close" value="close popup">
</div>

 

#layerはポップアップウィンドウが表示された時に背景を暗くするためのものです。

CSS

#layer {
    display: none;  /* 初期表示は非表示 */
    position: absolute; 
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.20;
}
#popup {
    display: none;  /* 初期表示は非表示 */
    position: absolute; 
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: white;
    border-radius: 5px;
    text-align: center;
}

#layerと#popupは初期状態では非表示です。

クリックされたら表示するようにjQueryで切り替えていきましょう。

 

jQuery

$(function() {
     
    // show popupボタンクリック時の処理
    $('#show').click(function(e) {
        $('#popup, #layer').show();
    });
     
    // レイヤー/ポップアップのcloseボタンクリック時の処理
    $('#close, #layer').click(function(e) {
        $('#popup, #layer').hide();
    });
     
});

処理は簡単で、click()でクリックイベントを登録し、クリックされたら表示・非表示を切り替えます。