Develop Reference

Multiple Modal Triggers

I am trying to utilize multiple triggers on a page, to bring up a specific modal each time. The problem I'm having is that it only bring up the last modal i've used. I have set up different names for the modals and buttons, however, the same modal continues to popup, regardless of which button I select and it's always the last one I developed. Below is the html and script I am using for both, any help would be greatly appreciated.
<div class="container-row-two">
<div class="container-Asset">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.png" alt=""><p>Asset</p>
</button>
</div>
<div class="container-Pros">
<button class="btn-Pros" id="myBtn-Pros">
<img class="image-icon" src="Pros.png" alt=""><p>Pros</p>
</button>
</div>
</div>
<!-- This is the Asset MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<span class="close-Asset">×</span>
<img class="image-icon-Asset" src="Asset.png" alt="Asset"><p>Asset</p></span>
<div class="modal-content-Asset-info">
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[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";
}
}
</script>
</div>
<!-- This is the Pros MODAL section -->
<div class="Pros-Modal">
<div id="myModal-Pros" class="modal-Pros">
<!-- Modal Design -->
<div class="modal-content-Pros">
<span class="close-Pros">×</span>
<img class="image-icon-Pros" src="Pros.png" alt="Asset"><p>Pros</p></span>
<div class="modal-content-Pros-info">
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Pros");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Pros");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Pros")[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";
}
}
</script>

you need named variable diffrent from another, because when the page rendered and you have same name variable, the value of the variable will have the last one
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[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";
}
}
// Get the modal
var modal2 = document.getElementById("myModal-Pros");
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn-Pros");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close-Pros")[0];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
<div class="container-row-two">
<div class="container-Asset">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.png" alt=""><p>Asset</p>
</button>
</div>
<div class="container-Pros">
<button class="btn-Pros" id="myBtn-Pros">
<img class="image-icon" src="Pros.png" alt=""><p>Pros</p>
</button>
</div>
</div>
<!-- This is the Asset MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<span class="close-Asset">×</span>
<span><img class="image-icon-Asset" src="Asset.png" alt="Asset"><p>Asset</p></span>
<div class="modal-content-Asset-info"></div>
</div>
</div>
</div>
<!-- This is the Pros MODAL section -->
<div class="Pros-Modal">
<div id="myModal-Pros" class="modal-Pros">
<!-- Modal Design -->
<div class="modal-content-Pros">
<span class="close-Pros">×</span>
<span><img class="image-icon-Pros" src="Pros.png" alt="Asset"><p>Pros</p></span>
<div class="modal-content-Pros-info"> </div>
</div>
</div>
</div>

My modal doesn't close when clicking outside

My modal doesn't close when clicking outside. My javascript is fine, so I think my problem is with my html, so if anyone could help find where I messed up I am very grateful.
I tried to change both to see if something works but I wasn't lucky.
// 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 on 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";
}
}
<header>
<div class="container1">
<div id="branding">
<img src="image/logo.png">
</div>
<nav>
<ul>
<li>HOME
</li>
<button id="myBtn" class="button">ABOUT US</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Welcome</h2>
s
</div>
<div class="modal-body">
<p>We are a New York based salon and spa, stablished in 1991. We have the best professionals to meet your needs.</p>
</div>
<div class="modal-footer">
<img id="img" src="image/logo3.png">
</div>
</div>
</div>
</ul>
</nav>
</div>
</header>

Ok I kinda fixed, just my first button (about us) is working, I did a copy o the script and added a number like so.
// 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 on 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";
}
}
// Get the modal
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}

You need to apply a "Close" background,
It will display (hide and show ) with modal events only.
Check below code :
// Get the modal
var modal = document.getElementById('myModal');
var modalBG = document.getElementById('myModalClose');
// 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 on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
modalBG.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
modalBG.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";
modalBG.style.display = "none";
}
}
.close{
display:none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
filter: alpha(opacity=50);
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav>
<ul>
<li>HOME</li>
<li><button id="myBtn" class="button">ABOUT US</button></div>
</ul>
</nav>
<div id="myModalClose" class="close">sa</div>
<div id="myModal" class="modal" style="width:300px">
<div class="modal-content">
<div class="modal-header">
<h2>Welcome</h2>
</div>
<div class="modal-body">
<p>We are a New York based salon and spa, stablished in 1991. We have the best professionals to meet your needs.</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
Now user clicks on light black background, the model and that background will be disappeared.

Modal, one script same side

I have this one modal working on my site, but i want one more modal, but how?
Ore maybe a link to working code to help ?
<div id="glemsom" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Glemt koden?</h2>
</div>
<div class="modal-body">
<p>Modal no 1</p>
</div>
with this script:
<script>
// Get the modal
var modal = document.getElementById('glemsom');
// Get the button that opens the modal
var btn = document.getElementById("glemtkoden");
// 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";
}
}
</script>
How can i add on more modal on same side to the script.

Second modal is preventing the close button from working all modals?

I'm having this issue where I have two modals and was going to add a third one, each opens up correctly when the button is clicked on but neither of them close when the "X" is clicked. If I click off the screen it automatically closes. Can't figure out why it's doing that since both have separate ids. If I remove the Second Modal JS code it works fine, but then I can't open the second modal window.
Here is the HTML:
<div id="generic_price_table">
<div>
<div class="row-2 clearfix">
<div class="col-1-2">
<div class="generic_content clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span></span>
</div>
</div>
<div class="generic_price_tag clearfix">
</div>
</div>
<div class="generic_feature_list">
<ul>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a id="myBtn" class="" href="javascript:void(0)">Register</a>
</div>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h1>Register</h1>
<p><strong>Select one of the below options to Start a Team, Join a Team, or Register as an Individual. </strong></p>
<p>
<a class="modalReg" id="StartTeamBTN" href="">Start a Team</a> <br />
<a class="modalReg" id="JoinTeamBTN" href="">Join a Team</a> <br />
<a class="modalRegRight" id="RegisterIndividualBTN" href="">Register as an Individual</a> <br />
</p>
</div>
</div>
<div class="col-1-2">
<div class="generic_content clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span></span>
</div>
</div>
<div class="generic_price_tag clearfix">
</div>
</div>
<div class="generic_feature_list">
<ul>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a id="myBtn_2" class="" href="javascript:void(0)">Register</a>
</div>
</div>
</div>
</div>
</div>
<div id="myModal_2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h1>Register</h1>
<p><strong>Select one of the below options to Start a Team, Join a Team, or Register as an Individual. </strong></p>
<p>
<a class="modalReg" id="StartTeamBTN" href="">Start a Team</a> <br />
<a class="modalReg" id="">Join a Team</a> <br />
<a class="modalRegRight" id="">Register as an Individual</a> <br />
</p>
</div>
</div>
</div>
And this the js that I'm using from W3S:
<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";
}
}
// Get the second modal
var modal = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn_2");
// 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";
}
}
</script>
here it is in jsbin: JSBIN LINK
Really appreciate any suggestions/help!
Thank you

There are a few issues with your code:
you're using same variable names for both modals this leads to your 1st modal variables (btn and modal) to be overwritten by 2nd modal variables. So your 1st button opens 2nd modal
you use 1st modal close button (document.getElementsByClassName("close")[0]) as selector for your 2nd span close button so it attempts to close 1st modal instead of 2nd
same thing with closing modal on window.onclick. it closes 2nd modal (see #1 above) not 1st one. there's a conflict between your onclick functions
You can try this as a quick fix:
Working demo: https://jsfiddle.net/9nv3vqdd/1/
// Get the modal
var modal1 = document.getElementById('myModal');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
// Get the second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
// Get the modal
var modal1 = document.getElementById('myModal');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// Get the second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if ((event.target == modal1) || (event.target == modal2)) {
event.target.style.display = "none";
}
}
Working demo: https://jsfiddle.net/9nv3vqdd/1/

In your js file, change your secondary modal id names and make them unique.
// Get the second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn2.onclick = function() {
console.log('here');
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.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";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
}

Buttons are opening the same modal

I am using 2 modals on my page. I open these modals with a buttons:
<button type="button" id="myBtn1">Modal 1</button>
<button type="button" id="myBtn2">Modal 2</button>
When I click on the buttons the buttons are opening the same modal. How can I fix that?
Here are the modals
Modal1:
<div id="myModal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="row">
<div class="">
<div class="x_content">
<p>content modal 1</p>
</div>
</div>
</div>
</div>
</div>
Modal2:
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="row">
<div class="">
<div class="x_content">
<p>content modal 2</p>
</div>
</div>
</div>
</div>
</div>
Script Modal 1:
<script>
// Get the modal
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// 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";
}
}
</script>
Script Modal 2:
<script>
// Get the modal
var modal = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn2");
// 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";
}
}
</script>

You should put private function
(function(){
// Get the modal
var modal = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = modal.getElementsByClassName("close")[0];//<<<<pay attention here
...
}());

dont var the same name for modal and btn.
try
// Get the modal
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
// Get the modal
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn2");

You're better off actually assigning the elements per btn.onclick. You're calling the global variable modal, which will use the most recently assigned value.
// for first script
btn.onclick = function() {
document.getElementById("myModal1").style.display = "block";
}
// for second script
btn.onclick = function() {
document.getElementById("myModal2").style.display = "block";
}