I am listing posts on the homepage. There are images attached to every post. When someone clicks on the image, it pops up a message. The first image works fine, but others do not.
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<div id="myBtn" class="text">
<p>get access</p>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Please login</p>
</div>
</div>
I have researched on StackOverflow and learned that in HTML there will be no same name ID element. I don't know how to implement the right codes.
You can use the querySelectorAll to get more than one element that matches that selector.
you can use valid selectors including by id, tag name, attributes, classes, and more.
you get back an array of DOM elements, so you need to use forEach to set each and every button on its own.
var modal = document.getElementById('myModal');
var btns = document.querySelectorAll('.access-btn');
var span = document.getElementsByClassName("close")[0];
btns.forEach((btn) => {
btn.onclick = function() {
modal.style.display = "block";
}
});
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.access-btn {
cursor: pointer;
text-transform: uppercase;
}
.modal {
background: grey;
border-radius: 5px;
padding: 10px;
margin: 10px;
position: relative;
}
.close {
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Please login</p>
</div>
</div>
<button id="myBtn" class="text access-btn">
<p>get access</p>
</button>
<button id="myBtn" class="text access-btn">
<p>2nd access</p>
</button>
<button id="myBtn" class="text access-btn">
<p>3rd access</p>
</button>
Related
I've used this tutorial to build a pop up box with a contact form however i want to use this in multiple places without duplicating the code and changing the ID's for each button
any advice would be appreciated if you need anymore information please let me know ill edit the question
here is my site ive added the id to both the slider links
this is my pop up box and button
<button id="myBtn" class="btn btn-light">
click here
</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<?php echo do_shortcode('[wpforms id="439"]'); ?>
</div>
here is my javascript
// 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";
}
}
Hello thank you for question
Try below code once. Here you find for multiple modals working finely
// Get the modal
function openModal(modal)
{
var modal = document.getElementById(modal);
modal.style.display = "block";
var span = document.querySelector("#"+modal.id+" .close");
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button onclick="openModal('modal1')">Open Modal 1</button>
<button onclick="openModal('modal2')">Open Modal 2</button>
<!-- The Modal 1 -->
<div id="modal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal1..</p>
</div>
</div>
<!-- The Modal 2 -->
<div id="modal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal2..</p>
</div>
</div>
when i mouseover on button ,modal should appear.When i try to select any values inside the modal ,modal immediately disappears.
<button class="modalShow" onMouseOver={this.showModal} onMouseOut={this.closeModal} >
Show Modal
</button>
<div class="modal modalView" id="myModal" >
<div class="modalDialog modalClass">
<div class="modalContent">
<div class="header">
<ul class="drop">
<li>
<input type="radio" id="first" name="first" value="1" />
<label>first</label>
</li>
<li>
<input type="radio" id="second" name="second" value="2" />
<label>second</label>
</li>
</ul>
</div>
</div>
</div>
</div>
showModal= event => {
document.getElementById("myModal").style.display = "block";
/* logic***/
}
close modal function on button mouseout .
closeModal= event => {
document.getElementById("myModal").style.display = "none";
}
Your question is not clear.So anybody dont understand what did you ask.But i prepare a solution for you even so.May be this sample is enough for you.
This code has 2 options :
opening modal with pressing a button.
and When selecting anywhere on modal , modal will close.
You can check it :
// 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";
}
function closeModal() {
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";
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div onClick="closeModal()" class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
I am pretty much new to the coding world, specially when it comes to using JS or jQuery.
I have found online how to open a modal to display information. I am currently working on a page where, when you click on an image, it displays a modal with the information of the product.
I have been able to make one button work displaying information, but when I trigger the second button, it makes both buttons display the same information.
I can't see where I'm going wrong.
Here is the code I'm using.
// 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 modal
var modal = document.getElementById('mymodalTWO');
// Get the button that opens the modal
var btn = document.getElementById("modaltwo");
// 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";
}
}
.boton {
border: solid 3px black;
padding: 3px 6px;
}
.productname {
font-size: 20px;
}
.imagedesktop {
width: 45%;
float: left;
}
/* The Modal (background) */
.modal {
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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
margin-top: 110px;
height: 680px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- Trigger/Open The Modal -->
<button id="modaltwo">Open Modal Two</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt</h2>
<div>
<img src="https://i3.cpcache.com/product/178522355/funny_choir_womens_dark_tshirt.jpg?width=550&height=550&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D" class="imagedesktop" />
</div>
<div>
<p>This is the first modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW</span>
</div>
</div>
</div>
<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
<!-- Modal content TWO-->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt TWO</h2>
<div>
<img src="https://cdn.shopify.com/s/files/1/1391/7881/products/spiderman_homecoming_shirt_front_1024x1024.jpg?v=1500006303" class="imagedesktop" />
</div>
<div>
<p>This is the second modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW!</span>
</div>
</div>
</div>
You are using same variable names for both modals. you need to change variable names in order to store different information in it.
As you mentioned that you are beginner in JS, you should read more about scoping, this post will help you.
// 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 modal
var modal2 = document.getElementById('mymodalTWO');
// Get the button that opens the modal
var btn2 = document.getElementById("modaltwo");
// 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 == modal || event.target == modal2) {
modal.style.display = "none";
modal2.style.display = "none";
}
}
.boton {
border: solid 3px black;
padding: 3px 6px;
}
.productname {
font-size: 20px;
}
.imagedesktop {
width: 45%;
float: left;
}
/* The Modal (background) */
.modal {
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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
margin-top: 110px;
height: 680px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- Trigger/Open The Modal -->
<button id="modaltwo">Open Modal Two</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt</h2>
<div>
<img src="https://i3.cpcache.com/product/178522355/funny_choir_womens_dark_tshirt.jpg?width=550&height=550&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D" class="imagedesktop" />
</div>
<div>
<p>This is the first modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW</span>
</div>
</div>
</div>
<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
<!-- Modal content TWO-->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt TWO</h2>
<div>
<img src="https://cdn.shopify.com/s/files/1/1391/7881/products/spiderman_homecoming_shirt_front_1024x1024.jpg?v=1500006303" class="imagedesktop" />
</div>
<div>
<p>This is the second modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW!</span>
</div>
</div>
</div>
I'm sure this is a really simple issue but I'm having trouble opening two modal windows with javascript.
Desired effect would be for each button to open their own modal
JS FIDDLE
HTML
<!-- Modal 1 -->
<div id="myModal-1" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 1</h2>
<span class="close">×</span>
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="myModal-2" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 2</h2>
<span class="close">×</span>
</div>
</div>
</div>
<button id="modalBtn-1">Modal 1</button>
<button id="modalBtn-2">Modal 2</button>
JS
// Get the modal 1
var modal = document.getElementById('myModal-1');
var btn = document.getElementById("modalBtn-1");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
The issue you were having was the second functions were overwriting the events for the first one.
If you had to do more than 2 modals you may want to consider modifying functions to be more universal
// Get the modal
var modal = document.getElementById('myModal-1');
// Get the button that opens the modal
var btn = document.getElementById("modalBtn-1");
// 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 modal = document.getElementById('myModal-2');
// Get the button that opens the modal
var btn = document.getElementById("modalBtn-2");
// 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";
}
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
margin: 10% auto; /* 15% from the top and centered */
max-width: 800px; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.box-content {
background: #fff;
margin: 0px 20px;
height: 100px;
}
h2 {
float: left;
}
<!-- Modal 1 -->
<div id="myModal-1" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 1</h2>
<span class="close">×</span>
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="myModal-2" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 2</h2>
<span class="close">×</span>
</div>
</div>
</div>
<button id="modalBtn-1">Modal 1</button>
<button id="modalBtn-2">Modal 2</button>
I have a popup modal which shows after 10 seconds. But it is shown at the top of page and I want that it should be shown at the bottom of page above footer.
How can I do this?
Here is my code :
// 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("close2")[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";
}
}
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #2098d1;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal {
position: absolute;
top: 200px;
right: 50px;
bottom: 0;
left: 0;
z-index: 1040;
overflow: auto;
overflow-y: auto;
}
<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>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="modal fade" id="popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Special Offer</h4>
</div>
<div class="modal-body">
<h1 style="color:green">10% OFFER </h1>
</div>
</div>
</div>
</div>
Not sure if you need so much code. But this can be made this way:
JavaScript:
$(function () {
setTimeout(function () {
$("#popup").modal();
}, 2000);
});
CSS:
#popup {
top: auto;
bottom: 10px;
outline: none;
}
Preview
Bootply: http://www.bootply.com/DmyamsX6qg
* Click on the link and use the full screen view to check out the functionality.