The following code tries to mimic the look and feel of the modal from Google’s Material Design using CSS3.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
body {
font-family: 'Roboto', serif;
font-size: 18px;
color: rgba(0, 0, 0, .87);
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.288);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
width: 80%;
box-shadow: 5px 10px 8px #888888;
border-radius: 2px;
}
button {
background-color: lightblue;
border: none;
font-size: 18px;
width: 140px;
height: 40px;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
cursor: pointer;
}
button:hover,
button:focus,
button:active,
button:target {
outline: none;
background-color: skyblue;
}
.modal-header {
font-weight: bold;
}
.modal-body {
margin-top: 10px;
}
.modal-footer {
padding: 10px;
margin: 10px;
margin-bottom: 20px;
position: relative;
}
.close {
background-color: #ffffff;
position: absolute;
right: 0;
cursor: pointer;
border: none;
box-shadow: none;
}
.close:hover,
.close:focus {
background-color: skyblue;
}
</style>
</head>
<body>
<h2>Modal</h2>
<button onclick="openModal()">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">Header Text</div>
<div class="modal-body">This is some content beneath the header.</div>
<div class="modal-footer">
<button onclick="closeModal()" class="close">Close</button>
</div>
</div>
</div>
<script>
let modal = document.getElementById('myModal');
let openModal = () => modal.style.display = 'block';
let closeModal = () => modal.style.display = 'none';
window.onclick = (event) => {
if (event.target == modal)
closeModal();
}
</script>
</body>
</html>