1 2 3 4 5 6 7 | <!-- レイヤー --> < div id = "layer" style = "display: block;" ></ div > <!-- ポップアップ --> < div id = "popup" style = "display: block;" > < div >popup</ div > < input type = "button" id = "close" value = "close popup" > </ div > |
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 ; } |
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(); }); }); |