【実装例】
https://webdesignday.jp/samples/p4680/sample2/

【HTMLサンプル】
<div class=”mw-btn”>
<a class=”js-modal-open” href=””>クリックでモーダルを表示</a>
</div>
<div class=”modal js-modal”>
<div class=”modal__bg js-modal-close”></div>
<div class=”modal__content”>
<p>ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。</p>
<a class=”js-modal-close” href=””>閉じる</a>
</div><!–modal__inner–>
</div><!–modal–>

【CSS】
.mw-btn{
margin: 0 auto;
position: fixed;
top: 50%;
left: 0;
}
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
.modal__bg{
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%;
}

【JQuery】

//モーダルウィンドウ
$(function(){
$(‘.js-modal-open’).on(‘click’,function(){
$(‘.js-modal’).fadeIn();
return false;
});
$(‘.js-modal-close,.bocci-btn-nav a’).on(‘click’,function(){
$(‘.js-modal’).fadeOut();
return false;
});

});