mdPlusPlus · January 8, 2023 22:07
diff --git a/modals.html b/modals.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 body {font-family: Arial, Helvetica, sans-serif;}

 /* The Modal (background) */
 .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }

 /* Modal Content */
 .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
 }

 /* The Close Button */
 .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
 }

 .close:hover,
 .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
 }
 </style>
 </head>
 <body>

 <h2>Modal Example</h2>

 <!-- Trigger/Open The Modal -->
 <button id="myBtnA" class="modalButton" value="myModalA">Open Modal A</button>
 <button id="myBtnB" class="modalButton" value="myModalB">Open Modal B</button>
 <button id="myBtnC" class="modalButton" value="myModalC">Open Modal C</button>

 <!-- The Modal -->
 <div id="myModalA" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Modal A</p>
  </div>
 </div>
 <div id="myModalB" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Modal B</p>
  </div>
 </div>
 <div id="myModalC" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Modal C</p>
  </div>
 </div>

 <script>
 // Get the <span> element that closes the modal
 var spans = document.getElementsByClassName("close");

 // When the user clicks a button, open the according modal
 var buttons = document.getElementsByClassName("modalButton");
 Array.from(buttons).forEach((button) => {
    button.onclick = function () {
        var modalID = button.value;
        modal = document.getElementById(modalID);
        modal.style.display = "block";
    }
 })

 // When the user clicks on <span> (x), close all modals
 Array.from(spans).forEach((span) => {
    span.onclick = closeAllModals;
 })

 // Close all modals
 function closeAllModals() {
    var modals = document.getElementsByClassName("modal");
    Array.from(modals).forEach((modal) => {
        modal.style.display = "none";
    })
 }

 // When the user clicks anywhere outside of the modals, close them
 window.onclick = function(event) {
    var modals = document.getElementsByClassName("modal");
    Array.from(modals).forEach((modal) => {
        if (event.target == modal) {
            closeAllModals();
        }
    })
 }
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {font-family: Arial, Helvetica, sans-serif;}

	/* The Modal (background) */
	.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content */
	.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	}

	/* The Close Button */
	.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	}

	.close:hover,
	.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	}
	</style>
	</head>
	<body>

	<h2>Modal Example</h2>

	<!-- Trigger/Open The Modal -->
	<button id="myBtnA" class="modalButton" value="myModalA">Open Modal A</button>
	<button id="myBtnB" class="modalButton" value="myModalB">Open Modal B</button>
	<button id="myBtnC" class="modalButton" value="myModalC">Open Modal C</button>

	<!-- The Modal -->
	<div id="myModalA" class="modal">
	<!-- Modal content -->
	<div class="modal-content">
	<span class="close">×</span>
	<p>Modal A</p>
	</div>
	</div>
	<div id="myModalB" class="modal">
	<!-- Modal content -->
	<div class="modal-content">
	<span class="close">×</span>
	<p>Modal B</p>
	</div>
	</div>
	<div id="myModalC" class="modal">
	<!-- Modal content -->
	<div class="modal-content">
	<span class="close">×</span>
	<p>Modal C</p>
	</div>
	</div>

	<script>
	// Get the <span> element that closes the modal
	var spans = document.getElementsByClassName("close");

	// When the user clicks a button, open the according modal
	var buttons = document.getElementsByClassName("modalButton");
	Array.from(buttons).forEach((button) => {
	button.onclick = function () {
	var modalID = button.value;
	modal = document.getElementById(modalID);
	modal.style.display = "block";
	}
	})

	// When the user clicks on <span> (x), close all modals
	Array.from(spans).forEach((span) => {
	span.onclick = closeAllModals;
	})

	// Close all modals
	function closeAllModals() {
	var modals = document.getElementsByClassName("modal");
	Array.from(modals).forEach((modal) => {
	modal.style.display = "none";
	})
	}

	// When the user clicks anywhere outside of the modals, close them
	window.onclick = function(event) {
	var modals = document.getElementsByClassName("modal");
	Array.from(modals).forEach((modal) => {
	if (event.target == modal) {
	closeAllModals();
	}
	})
	}
	</script>

	</body>
	</html>