【JQuery】ダイアログを自作で実装する
ダイアログを自作で実装する方法です。
html
<p class="openButton">ダイアログを開く</p> <div class="dialog"> <p>googleにリンクしますか?</p> <div class="buttonBox"> <a href="https://www.google.co.jp/">OK</a> <a href="javascript:void(0);" class="closeButton">キャンセル</a> </div> </div>
scss
.openButton { margin: 0; padding: 0; width: 150px; height: 50px; line-height: 50px; font-size: 15px; color: #fff; font-weight: bold; text-align: center; background-color: #3f3f3f; &:hover { @include opacity(0.7); text-decoration: none; } } .dialog { overflow: hidden; position: fixed; top: 30%; height: auto; box-sizing: border-box; padding: 20px; width: 600px; display: none; border:1px solid #aaa; z-index:1000; background-color: #fff; text-align: center; box-shadow:0px 0px 6px 3px rgba(0,0,0,0.13); -moz-box-shadow:0px 0px 6px 3px rgba(0,0,0,0.13); -webkit-box-shadow:0px 0px 6px 3px rgba(0,0,0,0.13); p { margin: 0; padding: 0; } .buttonBox { padding: 40px 0 0 0; a { display: inline-block; width: 200px; height: 40px; line-height: 40px; margin: 0 50px 0 0; font-size: 16px; color: #fff; font-weight: bold; background-color: #FF7F00; box-shadow:3px 3px 6px 2px rgba(0,0,0,0.11); -moz-box-shadow:3px 3px 6px 2px rgba(0,0,0,0.11); -webkit-box-shadow:3px 3px 6px 2px rgba(0,0,0,0.11); &:last-child { margin: 0; background-color: #ccc; } &:hover { opacity: 0.7; text-decoration: none; } } } }
JQuery
$(document).ready(function(){ var openDialog = $('.openButton'); // ダイアログを開くボタン要素 var dialogElm = $(".dialog"); // ダイアログの要素 var closeDialog = $(".closeButton"); // ダイアログを閉じるボタン openDialog.on("click", function(){ // leftの値 = (ウィンドウ幅 -コンテンツ幅) ÷ 2 var leftPosition = (($(window).width() - dialogElm.outerWidth(true)) / 2); dialogElm.css({"left": leftPosition + "px"}); dialogElm.show(); }); //閉じるボタンで非表示 closeDialog.on("click", function(){ $(this).parents(dialogElm).hide(); }); });
コメントを残す