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
Related
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.
This is what I tried, doesn't work. The result on my web page is a blank div at the bottom. I expected the css to darken the page when the ad shows up brighten when it is closed. But it doesn't.
function adTimer() {
setTimeout(banner, 5000);
}
var btn = document.querySelector('#btn-dismiss')
btn.addEventListener("click", function() {
bannerad = document.querySelector('#darken');
bannerad.style.display = 'none';
document.querySelector("html").classList.remove("darkenPage");
});
function banner() {
btn.innerhtml = "x";
bannerad.innerhtml = "Click here to go to our request page";
document.Banner.src = 'images/banner.jpg';
document.querySelector("html").classList.add("darkenPage");
}
var image = new image();
image.src = 'images/banner.jpg';
html.darken {
background-color: black;
}
html.darkenP body {
opacity: 0.5;
}
<div align="center">
<div id="banner-ad">
<img width="400px" height="400px" style="border-radius:40px; font-size:40px;" name="Banner" />
<button id="btndismiss"></button>
</div>
</div>
I've started this over and got what I was looking for. This is JavaScript I used:
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
window.onload = function() {
setTimeout(function (){modal.style.display="block";},5000);
}
// 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";
}
}
This is html I used:
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>texxt</h2>
</div>
<div class="modal-body">
<p>text</p>
<p>text</p>
</div>
<div class="modal-footer">
<h3>footer text</h3>
</div>
</div>
</div>
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 am facing a weird issue here. It might be a very silly mistake that I am doing.
function addTrainer() {
var modal = document.getElementById('add-trainers-form');
var span = document.getElementsByClassName("close")[0];
$(this).click(function(event) { //this part of code works fine,
$('.modal').css('display', 'block');
});
$(span).click(function(event) { //not working
// modal.style.display = "none";
$('.modal').css('display', 'inherit');
});
$(window).click(function(event) { //this also works fine
if (event.target == modal) {
modal.style.display = "none";
}
});
$('#add-trainer-btn').click(function() { //not working
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="add-trainers-controls">
<div class="add-remove-control">
<input id="add-trainer" type="image" src="img/add5.png" alt="Submit" width="48" height="48" onclick="addTrainer()">
</div>
</div>
<!-- The Modal -->
<div id="add-trainers-form" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Add Trainers</p>
<input class="textStyle" type="text" placeholder="Username">
<input class="textStyle" type="text" placeholder="Email">
<button id="add-trainer-btn" class="buttonStyle" type="button">Add</button>
</div>
</div>
</div>
When I click on #add-trainer button, modal pops up. Its default css property is set to display:none. After clicking it is set to display:block. When I click anywhere outside the modal window, display property is reset to none. But the same needs to be done with #add-trainer-btn and #close button which is not working.
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