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
9 years ago
|
<!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>
|