モーダルウインドウ

by jyoze

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p id="btn-open01">詳しく見る</p>
<div class="section-modal">
  <p class="btn-close" id="btn-close01"><i class="fa fa-times" aria-hidden="true"></i></p>
  <div class="text-box">
    <h2 class="modal-ttl">タイトル</h2>
    <p>テキストテキストテキストテキスト</p>
  </div>
</div>


<p class="modal-btn">詳しく見る</p>
<div class="section-modal">
  <p class="btn-close"><i class="fa fa-times" aria-hidden="true"></i></p>
  <div class="text-box">
    <h2 class="modal-ttl">タイトル</h2>
    <p>テキストテキストテキストテキスト</p>
  </div>
</div>

SCSS

.section-modal {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	overflow: auto;
	background-color: #fff;
	.btn-close {
		margin: 0;
		padding: 5px;
		background-color: #dfdfdf;
		i {
			margin-left: 10px;
			font-size: 20px;
		}
	}
	.text-box {
		padding: 0 10px 10px 10px;
		.modal-ttl {
			font-size: 18px;
		}
	}
}

JavaScript

//個別
//open
$('#btn-open01').click(function(){
 $(".section-modal").fadeIn();
 $("body").css({overflow:'hidden'});
});
//close
$('#btn-close01').click(function(){
  $(".section-modal").fadeOut();
  $("body").css({overflow:'visible'});
});

//まとめて
$('.modal-btn').on('click',function(){
  $(this).next().fadeIn();
});
$('.btn-close').on('click', function(){
  $(this).parent('.section-modal').fadeOut();
});