How can I include more than one modal pop ups?

[michaelmueller4321]

Hello!

I use this Modal script: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

How can I include more than one modal pop ups on my site?

Thank you very much for an answer.

Michael

Edited April 9, 2020 by michaelmueller4321

[michaelmueller4321]

I think, I have solved the problem.

 

New Script:

 

<script>
// Get the modal
var modal_1 = document.getElementById("myModal_1");

// Get the button that opens the modal
var btn_1 = document.getElementById("myBtn_1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close_1")[0];

// When the user clicks the button, open the modal
btn_1.onclick = function() {
  modal_1.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.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_1) {
    modal_1.style.display = "none";
  }
}
</script>
<script>
// Get the modal
var modal_2 = document.getElementById("myModal_2");

// Get the button that opens the modal
var btn_2 = document.getElementById("myBtn_2");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close_2")[0];

// When the user clicks the button, open the modal
btn_2.onclick = function() {
  modal_2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal_2.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function(event) {
  if (event.target == modal_2) {
    modal_2.style.display = "none";
  }
})
</script>

 

<style>

/* The Modal (background) */
.modal_1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal_2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content_1 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.modal-content_2 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close_1 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close_1:hover,
.close_1:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/* The Close Button */
.close_2 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close_2:hover,
.close_2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

</style>

 

 

<!-- Trigger/Open The Modal -->
<button id="myBtn_1">Open Modal</button>

<!-- The Modal -->
<div id="myModal_1" class="modal_1" style="z-index: 5;">

  <!-- Modal content -->
  <div class="modal-content_1">
    <span class="close_1">&times;</span>
    <p>Content 1</p>
  </div>

</div>

<!-- Trigger/Open The Modal -->
<button id="myBtn_2">Open Modal</button>

<!-- The Modal -->
<div id="myModal_2" class="modal_2" style="z-index: 5;">

  <!-- Modal content -->
  <div class="modal-content_2">
    <span class="close_2">&times;</span>
    <p>Content 2</p>
  </div>

</div>

 

[dsonesuk]

Why don't you open one modal, with multiple content with specific id ref, have button click send the reference of specific content, then hide all content but that specific id ref.

[michaelmueller4321]

I think this is a good idea and I would realize with this Accordion script https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol.

My Question is: How to open an Accordion section from an external link, like: https://www.test.com/test.html#section1

You can answer me also in this thread:

I would be very happy if I hear from you.🙂

[German_AC]

On 4/9/2020 at 9:31 PM, dsonesuk said:

Why don't you open one modal, with multiple content with specific id ref, have button click send the reference of specific content, then hide all content but that specific id ref.

Hi, I'm looking to do exactly what you said using this example (https://www.w3schools.com/howto/howto_js_lightbox.asp) 

 

I have two sets of pictures and I want to display two different lightboxes in the same page, but I can't find the correct way to do it. 

 

Any help will be greatly appreciated. Thanks!