css モーダルウィンド复数

Posted 2021-05-13

モーダルウィンド 複数
-----------


A [Pen](https://codepen.io/anonie/pen/PvedzN) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/PvedzN/license).

<article class="modal">
  <div class="modal-display-content">Open modal01</div>
  <!-- モーダルエリアここから -->
  <div class="modal-showup-area">
    <div class="modal-showup-bg"></div>
    <div class="modal-showup-content-wrapper">
      <div class="modal-showup-content">
        <h1>Here are modal contents!01</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      </div>
      <div class="modal-close">
        ×
      </div>
    </div>
  </div>
</article>
<!-- モーダルエリアここまで -->

<article class="modal">
  <div class="modal-display-content">Open modal02</div>
  <!-- モーダルエリアここから -->
  <div class="modal-showup-area">
    <div class="modal-showup-bg"></div>
    <div class="modal-showup-content-wrapper">
      <div class="modal-showup-content">
        <h1>Here are modal contents!02</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      </div>
      <div class="modal-close">
        ×
      </div>
    </div>
  </div>
</article>
<!-- モーダルエリアここまで -->

<!-- ↓body閉じタグ直前でjQueryを読み込む -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

$(function() {
  $('.modal-display-content').click(function() {
    $(this).next('div').addClass('modal-active');
    $('.modal-active').fadeIn();
  });
  $('.modal-close, .modal-showup-bg').click(function() {
    $('.modal-showup-area').removeClass('modal-active');
    $('.modal-showup-area').fadeOut();
  });
});

* {
  box-sizing: border-box;
}
body {
  font-family:'Avenir','Helvetica, Neue','Helvetica','Arial';
}


/* モーダルCSS */

.modal-display-content {
  width: 5rem;
  height: 5rem;
  background: #ccc;
  margin-bottom: 1rem;
}
.modal-display-content:hover {
  cursor: pointer;
}


.modal-showup-area {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-showup-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modal-showup-content-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 10px 30px;
  background-color: #fff;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}