Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta discription="modal-box">
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>JS Bin</title>
- <style id="jsbin-css">
- /* The Modal (background) */
- .modal {
- display: none;
- position: fixed;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgba(0,0,0,0.4);
- }
- .modal-content {
- background-color: #fefefe;
- margin: 15% auto;
- padding: 20px;
- border: 1px solid #888;
- width: 80%;
- }
- .close {
- color: #aaa;
- float: right;
- font-size: 28px;
- font-weight: bold;
- }
- .close:hover,
- .close:focus {
- color: black;
- text-decoration: none;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <button id="myBtn">Open Modal</button>
- <!-- The Modal-->
- <div id="myModal" class="modal">
- <div class="modal-content">
- <span class="close">×</span>
- <p>Some text in the Modal..</p>
- </div>
- </div>
- <script id="jsbin-javascript">
- //get the modal
- var modal = document.getElementById('myModal');
- //get the button that opens the modal
- var btn = document.getElementById('myBtn');
- //get the span element that closes the modal
- var span = document.getElementsByClassName('close')[0];
- // when the user clicks on 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) {
- if(event.target == modal) {
- modal.style.display = "none";
- }
- }
- </script>
- <script id="jsbin-source-css" type="text/css">/* The Modal (background) */
- .modal {
- display: none;
- position: fixed;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgba(0,0,0,0.4);
- }
- .modal-content {
- background-color: #fefefe;
- margin: 15% auto;
- padding: 20px;
- border: 1px solid #888;
- width: 80%;
- }
- .close {
- color: #aaa;
- float: right;
- font-size: 28px;
- font-weight: bold;
- }
- .close:hover,
- .close:focus {
- color: black;
- text-decoration: none;
- cursor: pointer;
- }</script>
- <script id="jsbin-source-javascript" type="text/javascript">//get the modal
- var modal = document.getElementById('myModal');
- //get the button that opens the modal
- var btn = document.getElementById('myBtn');
- //get the span element that closes the modal
- var span = document.getElementsByClassName('close')[0];
- // when the user clicks on 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) {
- if(event.target == modal) {
- modal.style.display = "none";
- }
- }</script></body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement