Question

190

Creating Multiple Modals on a Single Page

rated 0 times [ 192] [ 2] / answers: 1 / hits: 73501 / 8 Years ago, thu, november 17, 2016, 12:00:00

I'm having some issues creating multiple modals on a single webpage following the sample code from w3schools.com. The code in question that I am using is this one: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

I found a similar topic on the problem however after trying that solution in jsfiddle I still came up with no result, does anyone have any ideas?

Previous Topic:
Support for Multiple Modal Single Page

https://jsfiddle.net/oa1dr3q6/

<h2>1st Modal</h2>



<!-- Trigger/Open The Modal -->

<button id=myBtn>Open Modal</button>



<!-- The Modal -->

<div id=myModal class=modal>



<!-- Modal content -->

<div class=modal-content>

<div class=modal-header>

<span class=close>×</span>

<h2>Modal Header</h2>

</div>

<div class=modal-body>

<p>Some text in the Modal Body</p>

<p>Some other text...</p>

</div>

<div class=modal-footer>

<h3>Modal Footer</h3>

</div>

</div>

</div>



<h2>2nd Modal</h2>



<!-- Trigger/Open The Modal -->

<button id=myBtn>Open Modal</button>



<!-- The Modal -->

<div id=myModal class=modal>



<!-- Modal content -->

<div class=modal-content>

<div class=modal-header>

<span class=close>×</span>

<h2>Modal Header</h2>

</div>

<div class=modal-body>

<p>Some text in the Modal Body</p>

<p>Some other text...</p>

</div>

<div class=modal-footer>

<h3>Modal Footer</h3>

</div>

Script:

// 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 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;

}

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elijahm

Add To Favorites

Follow

Total Points: 674

Total Questions: 124

Total Answers: 79

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

answered 8 Years ago jaredsages · Accepted Answer

On your JSFiddle, make sure you use class="myBtn" instead of id="myBtn" then it should work.

Here is the full working code:

HTML:

<h2>1st Modal</h2>



<!-- Trigger/Open The Modal -->

<button class="myBtn">Open Modal</button>



<!-- The Modal -->

<div id="myModal" class="modal">



  <!-- Modal content -->

  <div class="modal-content">

    <div class="modal-header">

      <span class="close">×</span>

      <h2>Modal Header</h2>

    </div>

    <div class="modal-body">

      <p>Some text in the Modal Body</p>

      <p>Some other text...</p>

    </div>

    <div class="modal-footer">

      <h3>Modal Footer</h3>

    </div>

  </div>



</div>



<h2>2nd Modal</h2>



<!-- Trigger/Open The Modal -->

<button class="myBtn">Open Modal</button>



<!-- The Modal -->

<div id="myModal2" class="modal">



  <!-- Modal content -->

  <div class="modal2-content">

    <div class="modal-header">

      <span class="close">×</span>

      <h2>Modal Header</h2>

    </div>

    <div class="modal-body">

      <p>Some text in the Modal Body</p>

      <p>Some other text...</p>

    </div>

    <div class="modal-footer">

      <h3>Modal Footer</h3>

    </div>

  </div>



</div>

JS:

// Get the modal

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



// Get the button that opens the modal

var btn = document.getElementsByClassName("myBtn");





// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close");



// When the user clicks the button, open the modal 

btn[0].onclick = function() {

    modal[0].style.display = "block";

}



btn[1].onclick = function() {

    modal[1].style.display = "block";

}

// When the user clicks on <span> (x), close the modal

span[0].onclick = function() {

    modal[0].style.display = "none";

}



span[1].onclick = function() {

    modal[1].style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

    if (event.target == modal[0]) {

         modal[0].style.display = "none";

     }

    if (event.target == modal[1]) {

         modal[1].style.display = "none";

     }  

}