7

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) {

}
Felix B
  • 147
  • 1
  • 3
  • 13

3 Answers3

18

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.

pgk
  • 1,437
  • 1
  • 21
  • 20
  • 2
    Success! This is working now, after hours upon hours of my fiddling around with possibilites. Thank you!! (I can't upvote, apparently--too new. As soon as I can, I'll upvote this answer.) Thanks again! – Felix B Jan 14 '16 at 20:14
  • I'm glad that I could to help. Do not worry about upvote, just mark answer as completed, so others users do not deal with it. :) – pgk Jan 14 '16 at 20:32
  • pgk, I'm hoping you can help me a little more with this project. How can I get the modals to close on click outside of the modals themselves. Closing on click of the close button works, but I want them to close if a user clicks anywhere in the window. Do you have any suggestions? – Felix B Jan 18 '16 at 22:20
  • The dirty way is to attach a listener to your `body` and on click checks to see if event target is body or its different from modals. If so, loop throw all modals and close them. But maybe better decision is to add overlay to your modals - this is what user expects from modals - and attach the same listener from your close buttons to the overlay. – pgk Jan 19 '16 at 07:25
1

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/

Nitesh
  • 1,241
  • 4
  • 16
  • 25
0

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.

Tahir77667
  • 2,290
  • 20
  • 16