"js modal"
Bootstrap 3.0.0 Snippet by rafael12

<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; }

Related: See More


Questions / Comments: