2021.11.15

【js】クリックしたら要素が表示されるモーダルウィンドウ

  • CSS
  • テクニック
【js】クリックしたら要素が表示されるモーダルウィンドウ

クリックしたら要素が表示されるモーダルウィンドウの作り方です。

デモページ

 

See the Pen
Untitled
by nanami (@nanami_po)
on CodePen.

 

HTML

<div class="content">
<a class="modal_open" href="" data-target="modal01">MODAL01</a><br>
<a class="modal_open" href="" data-target="modal02">MODAL02</a>
</div>
<div id="modal01" class="modal">
<div class="modal_wrapper">
<div class="modal_content">
<a class="modal_close close_btn" href="">×</a>
<p>MODAL01</p>
<p>MODAL01</p>
</div>
</div>
</div>
<div id="modal02" class="modal">
<div class="modal_wrapper modal_close">
</div>
<div class="modal_content">
<a class="modal_close close_btn" href="">×</a>
<p>MODAL02</p>
<p>コチラは黒い背景部分をクリックでもモーダルが閉じます</p>
</div>
</div>

 

CSS

.content{
margin: 0 auto;
padding: 40px;
}
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.modal_wrapper{
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modal_content{
background: #fff;
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
}
.close_btn{
background: #c3c3c3;
border-radius: 50%;
color: #fff;
display: block;
height: 20px;
right: 10px;
top: 10px;
line-height: 20px;
text-align: center;
position: absolute;
width: 20px;
}

 

JS

$(function(){
$('.modal_open').each(function(){
$(this).on('click',function(){
var target = $(this).data('target');
var modal = document.getElementById(target);
$(modal).fadeIn();
return false;
});
});
$('.modal_close').on('click',function(){
$('.modal').fadeOut();
return false;
});
});

 

複数のモーダルを設置する想定で実装しています。data-target=””とidで展開する要素を指定しているので、モーダルの数だけdata-target=””とidを増やしていけばOKです。

 

MODAL01もMODAL02も右上の×ボタンで要素を閉じることができますが、MODAL02は背景の黒い部分をクリックでも要素を閉じられるようにしています。クラス名にmodal_closeを指定すると要素が閉じるので、modal_wrapperに modal_closeのクラスをつけます。

 

以上で実装は完了です。良かったら参考にしてください◎

 

 

Share Please

Read this too