CODEWITHSUNDEEP
javascripthtmlcss
dx65
dx65

Reputation: 11

How do I make add more than 1 modal box?

I have found out how to make Modal Boxes using html from here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2 I don't know how to make more than 1 work, I have tried copy and pasting but that makes only the first one work.

Upvotes: 1

Views: 52

Answers (1)

iuliu.net
iuliu.net

Reputation: 7145

You should add a second modal in your HTML page triggered by a second button element.

<!-- The First Modal -->
<div id="myModal" class="modal">

<!-- The Second Modal -->
<div id="myModal2" class="modal">

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

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

And also, in your JS code, duplicate your bindings:

// Get the modal
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");

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

Try this jsfiddle I made for you.

Upvotes: 1

Related Questions