<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<button type="button">Open Modal</button>
<div>
<h2>Javascript Modal Box</h2>
<p>You've opened the modal box!<br>Click to close me!</p>
</div>
<script>
var modal = document.getElementsByTagName('div')[0];
var button = document.getElementsByTagName('button')[0];
var open = function() {
modal.style.display = 'block';
button.style.opacity = '0';
};
button.addEventListener('click', open, false);
var close = function() {
modal.style.display = 'none';
button.style.opacity = '1';
};
modal.addEventListener('click', close, false);
</script>
button {
border: 0;
padding: 10px;
font-family: 'Source Sans Pro', Verdana, Sans-Serif;
font-size: 18px;
outline: none;
border-radius: 3px;
display: block;
margin: 15px auto;
background-color: #E3E3E3;
cursor: pointer;
transition: opacity 1s ease-in-out;
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
button:active {
box-shadow: 0 0 15px 0 lightgrey inset;
background-color: #EBEBEB;
}
div {
position: relative;
/*must set position: relative for the body to remain behind the modal*/
background-color: #3D3D3D;
max-width: 600px;
min-width: 150px;
padding: 15px;
text-align: center;
margin: 50px auto 0 auto;
border-radius: 5px;
z-index: 4;
display: none;
cursor: pointer;
box-shadow: 0 0 5px 1px grey;
}
div::before {
content: '';
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*must set z-index: -1 to keep the background behind the modal box*/
z-index: -1;
}
h2 {
font-family: 'Montserrat', Verdana, Sans-Serif;
color: coral;
}
p {
font-family: 'Source Sans Pro', Verdana, Sans-Serif;
color: white;
}
