Opening multiple modal boxes on one page

Question

I have a page that needs to have different modal boxes open when their corresponding link on the page is clicked. I've got the structure and javascript to work for ONE window, but I can't get it to work for more than one. I am thinking I need to loop through each modal box...but can't quite figure out the syntax.

This is for a client's WordPress site, and I'm using Advanced Custom Fields to populate the content. The page isn't published yet, so here's a codepen that shows my code: http://codepen.io/FelixB/pen/EPvEVG

The code:

var modal = document.getElementsByClassName('modal-window');

var btn = document.getElementsByClassName("click-to-open");

var span = document.getElementsByClassName("close")[0];

for (var i = 0; i < btn.length; i++) {
  var thisBtn = btn[i]
  thisBtn.onclick = function() {
    alert("hello");

    //modal.style.display = "block";
  }
}

span.onclick = function() { 
  modal.style.display = "none";
}

window.onclick = function(event) {

}

Answer 1

You must make modals unique to be able to select them later. One way to do this is through id.

<div id="modal-window-one" class="modal-window modal"></div>
<div id="modal-window-two" class="modal-window modal"></div>

You need to define which button which window should open. One possible solution for this is through data-attributes

<div class="click-to-open" data-modal="modal-window-one"> //will open modal one
<div class="click-to-open" data-modal="modal-window-two"> //will open modal two

And then - event:

var btn = document.getElementsByClassName("click-to-open");

for (var i = 0; i < btn.length; i++) {
  var thisBtn = btn[i];
  thisBtn.addEventListener("click", function(){
    var modal = document.getElementById(this.dataset.modal);
    modal.style.display = "block";
}, false);

Again - this is one possible solution.

Answer 2

below is an example to display multiple popup using bootstrap, also attached the jsfiddle which showcases an example. Set a class name to the modal dialog box.

<div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>  </div></div>

Instantiate the modal dialog box.

$('.myModal').modal();

Below is an running jsfiddle https://jsfiddle.net/niteshp27/msdg98vn/

Answer 3

The class of all modals will remain same as class="modal" but when there are numerous modals you wish to display on the same screen use the "id" property since Bootstrap Modals are written in Javascript and JS is totally based on id

<div id="modal-one" class="modal fade"></div>
<div id="modal-two" class="modal fade"></div>

You need to define which button will target which modal by using the data-target attribute of a < button > tag. In case you're using < a > tag to trigger a modal then use the href attribute. Example :

<button data-toggle="modal" data-target="#modal-one"> First Modal </button>          
<button data-toggle="modal" data-target="#modal-two"> Second Modal </button>

OR if using < a > tag then;

<a data-toggle="modal" href="#modal-one"> First Modal </a>
<a data-toggle="modal" href="#modal-one"> First Modal </a>

For further information you can checkout the following page Bootstrap Modals.

Note: As per Bootstrap's official Documentation Bootstrap only supports one modal window at a time. Nested modals aren’t supported as they believe them to cause poor user experiences.