forked from rachanon/stdbWeb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.0 KiB
99 lines
2.0 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<style> |
|
/* 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="1">Open Modal</button> |
|
<button id="2">Open Modal</button> |
|
<button id="3">Open Modal</button> |
|
<button id="4">Open Modal</button> |
|
<!-- The Modal --> |
|
<div id="myModal" class="modal"> |
|
|
|
<!-- Modal content --> |
|
<div class="modal-content"> |
|
<span class="close">×</span> |
|
<p>Some text in the Modal..</p> |
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<script> |
|
// Get the modal |
|
var modal = document.getElementById('myModal'); |
|
|
|
// Get the button that opens the modal |
|
var btn = document.getElementById("2"); |
|
|
|
// Get the <span> element that closes the modal |
|
var span = document.getElementsByClassName("close")[0]; |
|
|
|
// When the user clicks the button, open the modal |
|
btn.onclick = function() { |
|
modal.style.display = "block"; |
|
} |
|
|
|
// When the user clicks on <span> (x), close the modal |
|
span.onclick = function() { |
|
modal.style.display = "none"; |
|
} |
|
|
|
// When the user clicks anywhere outside of the modal, close it |
|
window.onclick = function(event) { |
|
console.log(event) |
|
if (event.target == modal) { |
|
console.log(modal) |
|
console.log(modal.style.display) |
|
modal.style.display = "none"; |
|
} |
|
} |
|
</script> |
|
|
|
</body> |
|
</html> |