kuc-arc-f/02_modal_0.html

## 02_modal_0.html
<!doctype html>
<!-- tailwindcss / modal -->
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/css/tailwind.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
  <div class="container mx-auto px-8 pb-20">
    <h1 class="text-4xl font-bold text-center">modal</h1>
    <hr />
    modal :
    <button id="openModal">Open modal</button>
    <!-- モーダルエリアここから -->
    <section id="modalArea" class="modalArea">
      <div id="modalBg" class="modalBg"></div>
      <div class="modalWrapper">
        <div class="modalContents">
          <h1 class="text-5xl font-bold">Here are modal without jQuery!
          </h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua. </p>
        </div>
        <div id="closeModal" class="closeModal">
          ×
        </div>
      </div>
    </section>
    <style>
    * {
      box-sizing: border-box;
    }
    body {
      font-family:'Avenir','Helvetica, Neue','Helvetica','Arial';
      height: 5000px;
    }
    /* モーダルCSSここから */
    .modalArea {
      visibility: hidden; /* displayではなくvisibility */
      opacity : 0;
      position: fixed;
      z-index: 10; /* サイトによってここの数値は調整 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: .4s;
    }
    .modalBg {
      width: 100%;
      height: 100%;
      background-color: rgba(30,30,30,0.9);
    }

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

    .closeModal {
      position: absolute;
      top: 0.5rem;
      right: 1rem;
      cursor: pointer;
    }

    .is-show { /* モーダル表示用クラス */
      visibility: visible;
      opacity : 1;
    }
    /* モーダルCSSここまで */

    /* 以下ボタンスタイル */
    button {
      padding: 10px;
      background-color: #fff;
      border: 1px solid #282828;
      border-radius: 2px;
      cursor: pointer;
    }
    #openModal {
      position: absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%,-50%);
    }
    </style>
    <script>
    (function () {
      const modalArea = document.getElementById('modalArea');
      const openModal = document.getElementById('openModal');
      const closeModal = document.getElementById('closeModal');
      const modalBg = document.getElementById('modalBg');
      const toggle = [openModal,closeModal,modalBg];

      for(let i=0, len=toggle.length ; i<len ; i++){
        toggle[i].addEventListener('click',function(){
          modalArea.classList.toggle('is-show');
        },false);
      }
    }());
    </script>
  </div>
</body>
</html>
	<!doctype html>
	<!-- tailwindcss / modal -->
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="/css/tailwind.css" rel="stylesheet">
	</head>
	<body class="bg-gray-100">
	<div class="container mx-auto px-8 pb-20">
	<h1 class="text-4xl font-bold text-center">modal</h1>
	<hr />
	modal :
	<button id="openModal">Open modal</button>
	<!-- モーダルエリアここから -->
	<section id="modalArea" class="modalArea">
	<div id="modalBg" class="modalBg"></div>
	<div class="modalWrapper">
	<div class="modalContents">
	<h1 class="text-5xl font-bold">Here are modal without jQuery!
	</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
	ut labore et dolore magna aliqua. </p>
	</div>
	<div id="closeModal" class="closeModal">
	×
	</div>
	</div>
	</section>
	<style>
	* {
	box-sizing: border-box;
	}
	body {
	font-family:'Avenir','Helvetica, Neue','Helvetica','Arial';
	height: 5000px;
	}
	/* モーダルCSSここから */
	.modalArea {
	visibility: hidden; /* displayではなくvisibility */
	opacity : 0;
	position: fixed;
	z-index: 10; /* サイトによってここの数値は調整 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .4s;
	}
	.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30,30,30,0.9);
	}

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

	.closeModal {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	cursor: pointer;
	}

	.is-show { /* モーダル表示用クラス */
	visibility: visible;
	opacity : 1;
	}
	/* モーダルCSSここまで */

	/* 以下ボタンスタイル */
	button {
	padding: 10px;
	background-color: #fff;
	border: 1px solid #282828;
	border-radius: 2px;
	cursor: pointer;
	}
	#openModal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	}
	</style>
	<script>
	(function () {
	const modalArea = document.getElementById('modalArea');
	const openModal = document.getElementById('openModal');
	const closeModal = document.getElementById('closeModal');
	const modalBg = document.getElementById('modalBg');
	const toggle = [openModal,closeModal,modalBg];

	for(let i=0, len=toggle.length ; i<len ; i++){
	toggle[i].addEventListener('click',function(){
	modalArea.classList.toggle('is-show');
	},false);
	}
	}());
	</script>
	</div>
	</body>
	</html>