SHARE
TWEET

Untitled

a guest Mar 21st, 2019 40 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta discription="modal-box">
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width">
  7.   <title>JS Bin</title>
  8. <style id="jsbin-css">
  9. /* The Modal (background) */
  10. .modal {
  11.   display: none;
  12.   position: fixed;
  13.   z-index: 1;
  14.   left: 0;
  15.   top: 0;
  16.   width: 100%;
  17.   height: 100%;
  18.   overflow: auto;
  19.   background-color: rgba(0,0,0,0.4);
  20.  
  21. }
  22. .modal-content {
  23.   background-color: #fefefe;
  24.   margin: 15% auto;
  25.   padding: 20px;
  26.   border: 1px solid #888;
  27.   width: 80%;
  28. }
  29. .close {
  30.   color: #aaa;
  31.   float: right;
  32.   font-size: 28px;
  33.   font-weight: bold;
  34. }
  35. .close:hover,
  36. .close:focus {
  37.   color: black;
  38.   text-decoration: none;
  39.   cursor: pointer;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44.  <button id="myBtn">Open Modal</button>
  45.  
  46.   <!-- The Modal-->
  47.   <div id="myModal" class="modal">
  48.     <div class="modal-content">
  49.       <span class="close">&times;</span>
  50.       <p>Some text in the Modal..</p>
  51.     </div>
  52.   </div>
  53. <script id="jsbin-javascript">
  54. //get the modal
  55. var modal = document.getElementById('myModal');
  56.  
  57.  
  58. //get the button that opens the modal
  59. var btn = document.getElementById('myBtn');
  60.  
  61. //get the span element that closes  the modal
  62.  
  63. var span = document.getElementsByClassName('close')[0];
  64.  
  65. // when the user clicks on the button, open the modal
  66. btn.onclick = function() {
  67.   modal.style.display = "block";
  68. }
  69.  
  70. //when the user clicks on span (x), close the modal
  71. span.onclick = function() {
  72.   modal.style.display = "none";
  73. }
  74.  
  75.  
  76. // when the user clicks anywhere outside of the modal, close it
  77.  
  78. window.onclick = function(event) {
  79.   if(event.target == modal) {
  80.     modal.style.display = "none";
  81.   }
  82. }
  83. </script>
  84.  
  85.  
  86. <script id="jsbin-source-css" type="text/css">/* The Modal (background) */
  87. .modal {
  88.   display: none;
  89.   position: fixed;
  90.   z-index: 1;
  91.   left: 0;
  92.   top: 0;
  93.   width: 100%;
  94.   height: 100%;
  95.   overflow: auto;
  96.   background-color: rgba(0,0,0,0.4);
  97.  
  98. }
  99. .modal-content {
  100.   background-color: #fefefe;
  101.   margin: 15% auto;
  102.   padding: 20px;
  103.   border: 1px solid #888;
  104.   width: 80%;
  105. }
  106. .close {
  107.   color: #aaa;
  108.   float: right;
  109.   font-size: 28px;
  110.   font-weight: bold;
  111. }
  112. .close:hover,
  113. .close:focus {
  114.   color: black;
  115.   text-decoration: none;
  116.   cursor: pointer;
  117. }</script>
  118.  
  119. <script id="jsbin-source-javascript" type="text/javascript">//get the modal
  120. var modal = document.getElementById('myModal');
  121.  
  122.  
  123. //get the button that opens the modal
  124. var btn = document.getElementById('myBtn');
  125.  
  126. //get the span element that closes  the modal
  127.  
  128. var span = document.getElementsByClassName('close')[0];
  129.  
  130. // when the user clicks on the button, open the modal
  131. btn.onclick = function() {
  132.   modal.style.display = "block";
  133. }
  134.  
  135. //when the user clicks on span (x), close the modal
  136. span.onclick = function() {
  137.   modal.style.display = "none";
  138. }
  139.  
  140.  
  141. // when the user clicks anywhere outside of the modal, close it
  142.  
  143. window.onclick = function(event) {
  144.   if(event.target == modal) {
  145.     modal.style.display = "none";
  146.   }
  147. }</script></body>
  148. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top