Edit in JSFiddle

Result
HTML
SCSS
JavaScript

<section class="section">
  <p class="section-title">Area 1</p>
  <a href="#" class="modal-btn js-modal-open">ここをクリック</a>

  <div id="modal" class="modal-overlay">
    <div class="modal-content">
      <p class="modal-title">ここはモーダルのなかみです</p>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
      <button class="modal-btn js-modal-close">閉じる</button>
    </div>
  </div>
</section>
<section class="section">
  <p class="section-title">Area 2</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section">
  <p class="section-title">Area 3</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section">
  <p class="section-title">Area 4</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>

.modal-btn {
  display: block;
  margin: 0 auto;
  color: #fff;
  font-weight: bold;
  background-color: #00a5a0;
  box-shadow: 0 5px 0 #008480;
  text-align: center;
  text-decoration: none;
  width: 200px;
  height: 50px;
  line-height: 50px;
  border-radius: 60px;
  border: none;
}

.modal-btn:hover {
  box-shadow: none;
  transform: translateY(5px);
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.section {
  padding: 30px;
  background-color: #dff0ef;

  &:nth-of-type(2n) {
    background-color: #d9e8e7;
  }
}

.section-title,
.modal-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

p {
  margin: 0 0 10px;
}

$(document).ready(function() {				
const $body = $('body');				
const $modal = $('#modal');				
const $modalOpenButton = $('.js-modal-open');				
const $modalCloseButton = $('.js-modal-close');				
				
const openModal = () => {				
$modal.fadeIn();				
$body.css('overflow', 'hidden');				
};				
				
const closeModal = () => {				
$modal.fadeOut();				
$body.css('overflow', 'auto');				
};				
				
const onClickOutside = (event) => {				
if ($modal.is(event.target)) closeModal();				
}				
				
$modalOpenButton.on('click', openModal);				
$modalCloseButton.on('click', closeModal);				
$modal.on('click', onClickOutside);				
});