Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
​
<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>
​
<!-- The Modal -->
<div id="myModal1" class="modal">
​
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
             Modal Header
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
           Your are viewing first modal<br>
<a href="#myModal2" class="modal-button">Click Here to Open Second Modal</a>
      </div>
    </div>
  </div>
</div>
​
​
<!-- The Modal -->
<div id="myModal2" class="modal">
​
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
             Modal Header
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
     Your are currently viewing second modal
      </div>
    </div>
  </div>
</div>
​
​
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque arcu est, lacinia ut posuere ut, lacinia quis ipsum. Quisque eleifend quam velit, nec accumsan ligula maximus eget. Praesent diam lorem, auctor quis justo sit amet, pretium molestie odio. Proin at est sed augue vestibulum malesuada at non lorem. Donec sit amet nisi dapibus, venenatis enim id, tristique enim. Maecenas vel sagittis arcu. Praesent et cursus tellus. Donec rhoncus blandit arcu, eu rhoncus dui semper vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eu nulla luctus, consectetur leo id, ornare urna.
​
Integer id molestie libero, in pulvinar diam. Donec non massa metus. Integer ut velit nec turpis fermentum iaculis et sagittis dui. Vestibulum vel dignissim lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac luctus lacus, ac ultrices arcu. Curabitur dignissim arcu mauris, et eleifend lacus imperdiet nec.
​
Nullam eleifend massa metus, vitae sagittis erat egestas vel. Maecenas fringilla, risus ut maximus mattis, nibh lacus maximus quam, at elementum erat lectus ac urna. Aenean egestas eleifend neque, et egestas justo condimentum a. Fusce in dapibus ligula. Aliquam dui felis, vestibulum quis est a, facilisis auctor est. Vestibulum ac elit eu mauris gravida aliquam sed ut orci. Ut tincidunt lacus non gravida pharetra.
</p>
 
let open_modals = [];
​
$(function() {
​
  // Get the button that opens the modal
  // read all the control of any type which has class as modal-button
  var btn = document.querySelectorAll(".modal-button");
​
  // All page modals
  var modals = document.querySelectorAll('.modal');
​
  // Get the <span> element that closes the modal
  var spans = document.getElementsByClassName("close");
​
  // When the user clicks the button, open the modal
  for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function(e) {
      e.preventDefault();
      modal = document.querySelector(e.target.getAttribute("href"));
      modal.style.display = "block";
      open_modals.push(modal.id);
      document.body.style.overflow = "hidden";
​
      if (this.parentElement.nodeName == 'BODY') {
        document.body.classList.add("open");
      } else {
        this.parentElement.parentElement.parentElement.classList.add("open");
      }
    }
  }
​
  function checkRenableScroll() {
    if (!open_modals.length) {
      document.body.style.overflow = "scroll";
    }
  }
​
  // When the user clicks on <span> (x), close the modal
  for (var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].classList.add("modal-content-active");
          var item = modals[index];
​
          if (index > 0) {
            spans[index - 1].parentElement.parentElement.classList.remove("open");
          } else {
            document.body.classList.remove("open");
          }
​
          setTimeout(function() {
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();
            checkRenableScroll();
​
          }, 400);
        }
      }
    }
  }
​
  //   When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].classList.add("modal-content-active");
          var item = modals[index];
​
          if (index > 0) {
            spans[index - 1].parentElement.parentElement.classList.remove("open");
          } else {
            document.body.classList.remove("open");
          }
​
          setTimeout(function() {
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();
            checkRenableScroll();
​
          }, 400);
        }
      }
    }
  }
})
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers