モーダルの簡単な使い方

デモ

HTML

<main> 
<!--モーダルを消した後に表示されるコンテンツ--> 
<div id="modal-content"><!--モーダルで表示されるコンテンツ--> 

           <p class="modal-logo">studio-0</p>

			<p>studio-0のメンバー登録は終了いたしました。<br><br>


				studio-0のメンバーは2021年3月末日をもってサービスを終了する予定です。<br>
				つきましては、新規会員募集を終了させていただきました。<br>
				<br>
				studio-0のメンバーへのご興味をお持ちいただき、ありがとうございました。<br>
				<br>
				studio-0は変わりなく、サービスをご提供してまいりますので、<br>
				引き続き、ご利用いただけますよう、よろしくお願い申し上げます。
				</p>
			<p><a id="modal-close" class="button-link">閉じる</a></p>
			<footer class="lp-footer">
				<p class="lp-footer__logo">studio-0</p>
				<p class="lp-footer__copyright"><small>© studio-0 ALL Rights Reserved.</small></p>
			</footer>
		</div> 

      </main>
<div id="modal-overlay"></div><!--画面全体を黒や白で覆う。#modal-contentよりも下のレイヤー-->

JavaScript

footerの後、</body>前に入れます。

<script>
$(function() {
	
	$( "#modal-content,#modal-overlay" ).click( function(){
              $( "#modal-content,#modal-overlay" ).fadeOut();
         } );

});
</script>
</body>

CSS

#modal-content{
　　width:50%;
  　max-width: 700px;
  　min-width: 500px;
　　margin:1.5em auto 0;
　　padding:50px 50px;
　　border:1px solid #d4d4d4;
　　background:#fff;
　　z-index:21;
  　position:fixed;
  　top: 50%;
  　left: 50%;
  　transform: translate(-50%,-50%);
  　font-size: 17px;
    @media (max-width: 767px) {
    　width:90%;
    　min-width: inherit;
    　padding:40px 20px;
    　font-size: 16px;
  }
}

#modal-overlay{
	z-index:20;
	/* display:none; */
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(255,255,255,0.75);
}


.modal-p{
	margin-top:1em;
}

.modal-p:first-child{
	margin-top:0;
}

.button-link{
	color:#00f;
	text-decoration:underline;
}
 
.button-link:hover{
	cursor:pointer;
	color:#f00;
}

#modal-close {
  　　display: block;
  　　border: 1px solid #d4d4d4;
  　　border-radius: 8px;
  　　padding: 10px 20px;
  　　width: 100px;
  　　text-align: center;
  　　margin: 0 auto;
  　　margin-bottom: 40px;
  　　margin-top: 100px;
  　　text-decoration: none;
  　　color: #333333;
   　@media (max-width: 767px) {
    　　margin-bottom: 20px;
    　　margin-top: 50px;
  　　}
　}

.modal-logo {
  　width: 150px;
  　margin-bottom: 50px;
}