ポップアップ

Last update : 11/07/2014 10:51:00

ポップアップもライブラリを使えば、実現できますが
これも自前で実装できるようになりましょう。
ポップアップの外側又はポップアップのcloseボタンをクリックすると閉じるようにしています。



HTML
?
1
2
3
4
5
6
7
<!-- レイヤー -->
<div id="layer"></div>
<!-- ポップアップ -->
<div id="popup">
    <div>popup</div>
    <input type="button" id="close" value="close popup">
</div>
CSS
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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;
}
JavaScript
?
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
     
    // show popupボタンクリック時の処理
    $('#show').click(function(e) {
        $('#popup, #layer').show();
    });
     
    // レイヤー/ポップアップのcloseボタンクリック時の処理
    $('#close, #layer').click(function(e) {
        $('#popup, #layer').hide();
    });
     
});

説明は以上です。