igayamaguchi/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
  body {
    font-family: -apple-system, Helvetica, Arial, sans-serif, Osaka, meiryo, ＭＳ Ｐゴシック;
    margin: 0;
  }
  #slide-up-modal {
  }
  .modal-mask {
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
  }
  .modal-container {
    height: 100%;
  }
  .modal-body {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .close-button {
    position: fixed;
    top: 0;
    left: 0;
    color: white;
  }
  .contents {
    margin-top: 40px;
    overflow: hidden;
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
  #open-button {
    color: white;
  }
  #over-modal {
    background: rgba(255, 196, 118, 0.82);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>
<div id="slide-up-modal">
  <div class="modal-mask">
    <div class="modal-container">
      <div class="modal-body">
        <div class="close-button">close</div>
        <div class="contents">
          <div id="open-button">open</div>
          <img src="https://www.wasaweb.net/images/stock-images/660x1188/London-38.jpg">
          <img src="https://www.wasaweb.net/images/stock-images/660x1188/London-38.jpg">
          <div id="over-modal" style="display: none;">
            over
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
const openButton = document.getElementById('open-button');
const overModal = document.getElementById('over-modal');

openButton.addEventListener('click', () => {
  overModal.style.display = 'block';
});

overModal.addEventListener('click', () => {
  overModal.style.display = 'none';
});

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
	body {
	font-family: -apple-system, Helvetica, Arial, sans-serif, Osaka, meiryo, ＭＳＰゴシック;
	margin: 0;
	}
	#slide-up-modal {
	}
	.modal-mask {
	background-color: black;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	}
	.modal-container {
	height: 100%;
	}
	.modal-body {
	width: 100%;
	height: 100%;
	position: relative;
	}
	.close-button {
	position: fixed;
	top: 0;
	left: 0;
	color: white;
	}
	.contents {
	margin-top: 40px;
	overflow: hidden;
	overflow-y: scroll;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	}
	#open-button {
	color: white;
	}
	#over-modal {
	background: rgba(255, 196, 118, 0.82);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="slide-up-modal">
	<div class="modal-mask">
	<div class="modal-container">
	<div class="modal-body">
	<div class="close-button">close</div>
	<div class="contents">
	<div id="open-button">open</div>
	<img src="https://www.wasaweb.net/images/stock-images/660x1188/London-38.jpg">
	<img src="https://www.wasaweb.net/images/stock-images/660x1188/London-38.jpg">
	<div id="over-modal" style="display: none;">
	over
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script>
	const openButton = document.getElementById('open-button');
	const overModal = document.getElementById('over-modal');

	openButton.addEventListener('click', () => {
	overModal.style.display = 'block';
	});

	overModal.addEventListener('click', () => {
	overModal.style.display = 'none';
	});

	</script>
	</body>
	</html>