<html>
<head>
</head>
<body>
<!-- Show modal link-->
<a href="#" onClick="showModal()">Click here to show modal</a>
<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-content">
<!-- Close button-->
<span class="close-button close-modal">×</span>
<!-- Modal contents-->
<h2>
Hello!
</h2>
This is an example of a modal that you can use to improve your UI.
<br>
<br>
What it does:
<ul>
<li>Modal launches when you click on the "Show Modal" link from the main page.</li>
<li>Modal closes when you click on the X button on the upper right hand of this box.</li>
<li>Modal also closes when you click on anywhere outside the modal.</li>
</ul>
<br> Hope you find this useful!
<br><br>
</div>
</div>
</body>
</html>
function showModal() {
//Get the modal
var modal = document.getElementById('modal');
//Get button that closes the modal
var close_modal = document.getElementsByClassName("close-modal")[0];
//Shows the modal
modal.style.display = "block";
// When the user clicks on (x), close the modal
close_modal.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
a:link,
a:visited,
a:active {
color: #0099cc;
text-decoration: underline;
}
/* Modal background */
.modal {
display: none;
position: fixed;
z-index: 1.;
padding-top: 100px;
left: 0;
top: 0;
min-width: 300px;
width: 100%;
height: 100%;
overflow: auto;
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.4);
}
/* Modal content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 10px;
border-radius: 10px;
width: 500px;
}
/* Close Button */
.close-button {
color: #aaaaaa;
float: right;
font-size: 20px;
font-weight: bold;
}
.close-button:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}