I have a simple modal and I managed to get multiple links (buttons) to trigger the modal, however, I also need to load different content into the modal based on which link (button) is pressed. So I have a couple of links:
<a class="myBtn" href="#">Cats</a>
<a class="myBtn" href="#">Dogs</a>
and I have my content divs:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"><img src="svg/close.svg"></span>
<div class="modal-header clearfix">
<h3">Cats</h3>
</div>
<div class="modal-body">
<h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
</div>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"><img src="svg/close.svg"></span>
<div class="modal-header clearfix">
<h3">Dogs</h3>
</div>
<div class="modal-body">
<h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
</div>
</div>
</div>
and finally my JS
<script type="text/javascript">
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.querySelectorAll(".myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
[].forEach.call(btn, function(el) {
// When the user clicks the button, open the modal
el.onclick = function() {
modal+'me'.style.display = "flex";
}
})
// 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>
As mentioned, I want to load the Cats content DIV into the modal when I click one link and load the Dogs content DIV into the same modal when I click the other link.
I think I need to use data-ID or something to make the buttons unique but that's where I noob out and get lost. Does anyone have a solution. Thank you
There are various solutions.
'use strict';
const animalLinks = document.querySelectorAll('[data-animal-link]');
const animalModals = document.querySelectorAll('[data-animal-modal]');
document.addEventListener('click', (evt) => {
evt.preventDefault();
const target = evt.target;
if (target && target.matches('[data-animal-link]')) {
let value = target.dataset.animalLink;
// check target
console.log(value)
animalModals.forEach((item) => {
if (item.dataset.animalModal === value) {
item.style.display = 'block';
}
});
}
});
#myModal {
display: none;
width: 100px;
height: 100px;
}
[data-animal-modal = 'cats'] {
background-color: tomato;
}
[data-animal-modal = 'dogs'] {
background-color: gold;
}
<a data-animal-link="cats" class="myBtn" href="#">Cats</a>
<a data-animal-link="dogs" class="myBtn" href="#">Dogs</a>
<div data-animal-modal="cats" id="myModal" class="modal"></div>
<div data-animal-modal="dogs" id="myModal" class="modal"></div>
It's a simple code.
You can fix it for your tasks.
Related
How do I loop through all the images using the call trigger, when I click on the image a modal popup should show my text and image.
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
}
<div portfolio-item ">
<a class="trigger "><img src="images/techify.jpg "/></a>
<div class="modal ">
<div class="modal-content ">
<img class="modalimages " src ="Images/techify.jpg ">
<div class="modal-text ">
<p> It is all about a training institute</p>
</div>
</div>
</div>
</div>
<div class="modal-content ">
<img class="modalimages " src ="Images/HairStyling.jpg ">
</div>
</div>
Going by what you've supplied there are a few minor issues that would even prevent this from running, so I had to make some small changes to the code before I could even begin. One being the } placed at the end of your script.
Another being the <div portfolio-item"> only having one ".
This may or may not be what you're trying to accomplish, but we'd need more information in order to know.
<style>
.modal { display: block; }
.show-modal { display: none; }
</style>
<div portfolio-item>
<a class="trigger">
<img src="images/techify.jpg"/>
</a>
<div class="modal">
<div class="modal-content">
<img class="modalimages" src="Images/techify.jpg">
<div class="modal-text">
<p> It is all about a training institute</p>
</div>
</div>
</div>
<div class="modal-content">
<img class="modalimages" src="Images/HairStyling.jpg">
</div>
</div>
<button class="close-button">Close Button</button>
<script>
var modal = document.querySelectorAll(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
for(i=0;i<modal.length;i++){
modal[i].classList.toggle("show-modal");
}
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
If you've looking for both images to be hidden on the first image click or by pressing the button (which I also had to add) you'll need to move the following code up by one line
<div class="modal-content">
<img class="modalimages" src="Images/HairStyling.jpg">
</div>
If you want to add an event to every image, you could use some Javascript like this:
var images = document.querySelectorAll("img")
for( var i = 0 ; i < images.length ; i++ ) {
images[i].addEventListener("click" someFunction)
}
This make it so that when any image is clicked, it calls the someFunction function
In my website I have a problem with my modal. It is supposed to be triggered by an icon appearing close to the embed tags. Although it works to activate the modal, it just displays the modal-content without anything in it; after closing the modal and making a second click on the openModal() function the wanted embed file is displayed. Then when clicking another document it displays the preceding document until closed and clicked again. Why is this happening and what should I do to fix it?
HTML (but with only one embed) :
<div class = "overlay-cont">
<embed src="link-to-pdf.pdf" >
<div class = "overlay">
<img class = "enlarge-icon" src = "arrow-icon.svg" onclick ="openModal(0)">
</div>
</div>
<div id = "myModal" class = "modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<embed id = "currentDoc">
</div>
</div>
JavaScript:
var doc = document.getElementsByTagName("EMBED");
function openModal(n){
document.getElementById("myModal").style.display = "block";
document.getElementById("currentDoc").src = doc[n].src;
}
function closeModal(){
document.getElementById("myModal").style.display = "none"
}
Instead of having a static embed element and giving it dynamic src attribute value, generate dynamic embed element every time you show the modal and remove it every time you close the modal.
var doc = document.getElementsByTagName("EMBED");
function openModal(n) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
var node = document.createElement("embed");
var src_attr = document.createAttribute("src");
src_attr.value = doc[n].src;
node.setAttributeNode(src_attr);
modal.appendChild(node);
}
function closeModal() {
var e = document.querySelectorAll("embed")[1];
e.parentNode.removeChild(e);
document.getElementById("myModal").style.display = "none"
}
<html>
<head>
</head>
<body>
<div class="overlay-cont">
<embed src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="overlay">
<img class="enlarge-icon" src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" onclick="openModal(0)">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content"></div>
</div>
</body>
</html>
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.
I am making a portfolio website and want to have a table with previous projects I've worked on. The idea is to have a grid of thumbnails and when you click the image, a modal opens with the project in PDF. Everything is working out, except I cannot close the modal. The script for closing the modal was working before, but I'm not sure what happened. Neither the 'X' nor clicking outside the window are working. Any ideas?
<td><!-- AGNES HAMERLIK PROJECT -->
<!-- Trigger/Open The Modal -->
<button id="agnes"><img src="../images/projectImages/agnes_thumbnail.png" height="250" width="auto" alt="Agnes Hamerlik Thumbnail"></button>
<!-- The Modal -->
<div id="agnesModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/AgnesHamerlikPresentation.pdf" type="application/pdf" width="100%" height="400" alt="Agnes Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var agnesModal = document.getElementById("agnesModal");
// Get the button that opens the modal
var agnesBtn = document.getElementById("agnes");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
agnesBtn.onclick = function() {
agnesModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
agnesModal.closeModal();
//agnesModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == agnesModal) {
agnesModal.style.display = "none";
}
}
</script>
</td>
<td><!-- VAN DOREN PROJECT -->
<!-- Trigger/Open The Modal -->
<button id="vandoren"><img src="../images/projectImages/vandoren_thumbnail.png" height="250" width="auto" alt="Van Doren Thumbnail"></button>
<!-- The Modal -->
<div id="vandorenModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/VanDorenPresentation.pdf" type="application/pdf" width="100%" height="400" alt="Van Doren Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var vandorenModal = document.getElementById('vandorenModal');
// Get the button that opens the modal
var vandorenBtn = document.getElementById("vandoren");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
vandorenBtn.onclick = function() {
vandorenModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
vandorenModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vandorenModalModal) {
vandorenModal.style.display = "none";
}
}
</script>
</td>
</tr>
<tr>
<td><!-- Platinum Sales Group Project -->
<!-- Trigger/Open The Modal -->
<button id="psg"><img src="../images/projectImages/psg_thumbnail.png" height="250" width="auto" alt="Platinum Sales Group Thumbnail"></button>
<!-- The Modal -->
<div id="psgModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/psgFINAL.pdf" type="application/pdf" width="100%" height="400" alt="Platinum Sales Group Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var psgModal = document.getElementById('psgModal');
// Get the button that opens the modal
var psgBtn = document.getElementById("psg");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
psgBtn.onclick = function() {
psgModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
psgModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == psgModal) {
psgModal.style.display = "none";
}
}
</script>
</td>
I have a popup bootstrap code in html file and i want to use in another html file.I have created a button in html file and i want to cal model which is in another html file.How can i do this??
A.html
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"> <button type="button" id="myBtn" class="btn btn-success" style="width:200px;font-size:30px; transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:left, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:left,center;
position: fixed; bottom:30%; right: -73px;
color:white;" class="btn btn-success">Order</button>
</div>
</div>
</div>
<script type="text/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("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";
}
}
</script>
B.HTML
<html>
<head></head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-header">
<span class="close2">×</span>
<h2>Order Services</h2>
</div>
<div class="modal-body2">
</div>
<!-- <div class="modal-footer">
<h3>Modal Footer</h3>
</div> -->
</div>
</div>
</body>
</html>
I want to use B.HTML from A.HTML .How can i accomplish this?
Use this script on A.html file
$(document).load( "B.html", function() {
alert( "Load was performed." );
});
Try this code inside A.html .
<div id="myModalContainer"></div>
$(document).ready(
function() {
$( "#myModalContainer" ).load( "B.html #myModal" );
}
);
you can use jquery or
you cant create your modal as string that contain htmls code in it
for example
var = '<div class="model">...</div>'
and then set this script in js file and then import it in any file you want to use modal
at the end you can append it into your body or remove it
you can see this link
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal