MasahiroHarada/quiz.html

## quiz.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modal Sample</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="container">
    <button class="button" type="button" data-modal-open="modal1">Open</button>
  </div>

  <div class="modal" id="modal1">
    <div class="modal-overlay" data-modal-close>
      <div class="modal-container">
        <header class="modal-header">
          <h2 class="modal-title">こんにちは</h2>
          <button class="modal-close" data-modal-close>&times;</button>
        </header>
        <main class="modal-content">
          <p>モーダルだよ</p>
          <p><img src="https://media.giphy.com/media/MWSRkVoNaC30A/giphy.gif" alt=""></p>
          <p><a href="https://giphy.com/gifs/cat-hello-oh-MWSRkVoNaC30A">via GIPHY</a></p>
        </main>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

## script.js
/**
 * モーダルの開閉を制御する
 */
document.querySelectorAll('[data-modal-open]').forEach(elem => {
  // 開閉する対象の要素を取得する
  const targetModalId = elem.getAttribute(/* Insert code here... */);
  const modal = /* Insert code here... */;

  // 閉じる
  modal.querySelectorAll('[data-modal-close]').forEach(closeElem => {
    /* Insert code here... */
  });

  // 開く
  elem.addEventListener('click', function () {
    /* Insert code here... */
  });
});

## styles.css
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
}

.container {
  padding: 2rem;
}

.button {
  background: tomato;
  border: 0;
  border-radius: .25rem;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: .75em 1.25em;
  transition: transform 300ms ease-in;
}

.button:hover {
  transform: scale(1.05);
}

/***********************\
  Modal
\***********************/

.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal.is-open .modal-overlay {
  animation: modalFadeIn 300ms ease-in;
}

.modal-overlay {
  background: rgba(0, 0, 0, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-container {
  background: #fff;
  border-radius: .25rem;
  max-height: 90vh;
  max-width: 90vw;
  padding: 1.5rem;
  overflow: scroll;
}

.modal-header {
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  justify-content: space-between;
  margin: 0 0 1.5rem 0;
  padding-bottom: .5em;
}

.modal-title {
  margin: 0;
}

.modal-content img {
  max-width: 100%;
}

.modal-close {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  cursor: pointer;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Modal Sample</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>

	<div class="container">
	<button class="button" type="button" data-modal-open="modal1">Open</button>
	</div>

	<div class="modal" id="modal1">
	<div class="modal-overlay" data-modal-close>
	<div class="modal-container">
	<header class="modal-header">
	<h2 class="modal-title">こんにちは</h2>
	<button class="modal-close" data-modal-close>×</button>
	</header>
	<main class="modal-content">
	<p>モーダルだよ</p>
	<p><img src="https://media.giphy.com/media/MWSRkVoNaC30A/giphy.gif" alt=""></p>
	<p><a href="https://giphy.com/gifs/cat-hello-oh-MWSRkVoNaC30A">via GIPHY</a></p>
	</main>
	</div>
	</div>
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	/**
	* モーダルの開閉を制御する
	*/
	document.querySelectorAll('[data-modal-open]').forEach(elem => {
	// 開閉する対象の要素を取得する
	const targetModalId = elem.getAttribute(/* Insert code here... */);
	const modal = /* Insert code here... */;

	// 閉じる
	modal.querySelectorAll('[data-modal-close]').forEach(closeElem => {
	/* Insert code here... */
	});

	// 開く
	elem.addEventListener('click', function () {
	/* Insert code here... */
	});
	});
	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	min-height: 100vh;
	}

	.container {
	padding: 2rem;
	}

	.button {
	background: tomato;
	border: 0;
	border-radius: .25rem;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	padding: .75em 1.25em;
	transition: transform 300ms ease-in;
	}

	.button:hover {
	transform: scale(1.05);
	}

	/***********************\
	Modal
	\***********************/

	.modal {
	display: none;
	}

	.modal.is-open {
	display: block;
	}

	.modal.is-open .modal-overlay {
	animation: modalFadeIn 300ms ease-in;
	}

	.modal-overlay {
	background: rgba(0, 0, 0, .75);
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}

	.modal-container {
	background: #fff;
	border-radius: .25rem;
	max-height: 90vh;
	max-width: 90vw;
	padding: 1.5rem;
	overflow: scroll;
	}

	.modal-header {
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	display: flex;
	justify-content: space-between;
	margin: 0 0 1.5rem 0;
	padding-bottom: .5em;
	}

	.modal-title {
	margin: 0;
	}

	.modal-content img {
	max-width: 100%;
	}

	.modal-close {
	background: transparent;
	border: 0;
	font-size: 1.6rem;
	cursor: pointer;
	}

	@keyframes modalFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}