モーダルについて教えてください。
Q&A
Closed
解決したいこと
jQueryの勉強をしています。
勉強の課題が出たのですが、モーダルが機能しません。
https://recooord.org/jquery-modal-window/
こちらの記事を参考にして同じにコードを書いてみたのですが、上手く機能しません。
どこがおかしいのか教えて頂きたいです。
該当するソースコード
<div class="wrapper">
<p class="modal-show">CLICK!!</p>
<div class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-text">MODAL WINDOW</div>
<button type="button" class="modal-close">x</button>
</div>
</div>
</div>
<script defer>
window.addEventListener( 'load', function(){
$(function() {
let open = $('.modal-show'),
close = $('.modal-close'),
modal = $('.modal');
open.on('click', function() {
modal.addClass('active');
return false;
});
close.on('click', function() {
modal.removeClass('active');
});
});
}, false);
</script>
</body>
</html>
CSS
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
background-color: #fff;
border-radius: 20px;
}
.modal-text {
display: table-cell;
width: 300px;
height: 300px;
text-align: center;
vertical-align: middle;
}
.modal-close {
position: absolute;
top: -10px;
right: -10px;
width: 30px;
height: 30px;
padding-bottom: 4px;
background-color: #fff;
border: 2px #777 solid;
border-radius: 15px;
color: #777;
font-weight: bold;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.modal-show {
margin: 50px;
}
自分で試したこと
他のページも見たのですが一番わかりやすい記事を参考にしました。
変数に要素を入れましたが、入れないバージョンでも試してみましたが動きませんでした。
どこが間違えているのか教えて頂きたいです。
宜しくお願い致します。
0
