I'm making my first website and I'm trying to make my own lightbox. Till now, only the first pic can be visible in the modal. Although the ID and the source move when I click, the modal doesn't open. Here my JS code :
var modal = document.getElementById('simple-modal');
var modalBtn = document.getElementById('img-link');
var closeBtn = document.getElementsByClassName('close-modal')[0];
const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img');
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
imgs.forEach(img => img.addEventListener('click', imgClick));
$('.imgs img').click(function() {
$('#img-link').removeAttr('id');
$(this).attr('id', 'img-link');
return false;
});
function openModal(e) {
if (e.target == modalBtn) {
modal.style.display = 'flex';
}
}
function imgClick(e) {
current.src = e.target.src;
}
function closeModal() {
modal.style.display = 'none';
}
function outsideClick(e) {
if(e.target == modal) {
modal.style.display = 'none';
}
}
Edit, as resquested, here my HTML :
HTML
<div class="imgs">
<img id="img-link" src="../img/pizza-it.png" alt="">
<img src="../img/mv-logo.png" alt="">
<img src="../img/kanari-logo.png" alt="">
<img src="../img/kanari-carte.png" alt="">
</div>
<div id="simple-modal" class="gallery-modal">
<div class="close-modal">
<span>×</span>
</div>
<div id="arrow-prev" class="arrow"></div>
<div class="modal-box">
<img src="" id="current">
</div>
<div id="arrow-next" class="arrow"></div>
</div>
Thanks in advance.
Related
I am trying to close the modal when it's clicked outside. I have tried to loop through modals but can't get them to set its display to none.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my code to open modals.
const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');
for (var i = 0; i < coffeeGrounds.length; i++) {
coffeeGrounds[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
var a = document.getElementById(x);
a.setAttribute('style','display:block');
});
}
Here is my code, when clicked outside to close the modal:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});
Over here by setting the modal display to none. It's holding back to display the modal also.
Please any help would be appreciated.
Codepen: https://codepen.io/zaidik/pen/bGwpzbE
When you click outside of the modal window you should not have the modal window in you event propagation array
In other words take advantage of event.path property
Working example (based on the provided fiddle)
window.addEventListener('click', function(e) {
const allModals = document.querySelectorAll('.project-card');
if (!e.path.some(x => x.className && x.className.includes('project-card'))) {
allModals.forEach(x => x.style.display = 'none');
}
}, true)
Working fiddle example: https://jsfiddle.net/7pzs1042/
I have a basic problem with showing modal. Everything is working ok, but only for second click. I am sure, I have some mistake in js code. Can you help me please?
HTML code:
<div class="flex flex-col lg:flex-row justify-center px-3 lg:px-0">
<div class="pb-3 lg:pb-0 lg:p-5 cursor-pointer">
<img onclick="showImage('planek1')" id="planek1" src="assets/imgs/planek1.jpg" alt="">
</div>
<div class="cursor-pointer lg:p-5">
<img onclick="showImage('planek2')" id="planek2" src="assets/imgs/planek2.jpg" alt="">
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
Javascript code:
function showImage(id) {
const modal = document.getElementById("myModal");
const img = document.getElementById(id);
const modalImg = document.getElementById("img01");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
};
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
}
Try removing onclick="showImage('planek2')", give a class="triggers-modal" to your elements, and write this JavaScript:
const modalImg = document.getElementById("img01");
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
Array.from(document.getElementsByClassName('triggers-modal')).forEach(element => {
element.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
};
});
This code defines the modal behavior for every element that has the triggers-modal class name instead of the onclick event which is inappropriate.
im doing a trello copy
im using a modal to insert adjacent html
after adding that i wanna refresh the javascript src so that it can detect the div this is the code
<div id="ColCreate" class="fab tooltip"><span class="tooltiptext">Add Column</span>+</div>
<div id="CreateCol" class="ColCreate">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Create an column</h2>
</div>
<div class="modal-body">
<label for="cname">Column Name</label>
<input id="cnamei" type="text" name="cnamei"><br>
<button onclick="finish()" class="Finish">Finish</button>
</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
<div id="container" class="container">
</div>
<script src="./index.js"></script>
<script src="./modal.js"></script>
<script src="./Drag.js"></script>
this is the javascript
var modal = document.getElementById("CreateCol");
var btn = document.getElementById("ColCreate");
var span = document.getElementsByClassName("close")[0];
var finish = document.getElementsByClassName("Finish")[0];
var list1 = "<div><h3>"
var list2 = "</h3><ul id=\"list-1\" class=\"sortable\"><li id=\"fake\" class=\"hidden\"></li><li id=\"item-1\">Link 01</li><li id=\"item-2\">Link 02</li><li id=\"item-3\">Link 03</li><li id=\"item-4\">Link 04</li><li id=\"item-5\">Link 05</li><li id=\"item-6\">Link 06</li></ul></div>"
btn.onclick = function() {
modal.style.display = "block";
}
var finish = function() {
var x = document.getElementById("cnamei").value;
var y = document.getElementById("container");
modal.style.display = "none";
var list = `${list1}${x}${list2}`
y.insertAdjacentHTML( 'beforeend', list);
}
span.onclick = function() {
modal.style.display = "none";
}
modal.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
i wanna refresh the javascript so that dragging works
I want to make dropdown item using vanilla js that has the same jQuery functionality with the next method. Because same class name not working with vanilla js
var button = document.querySelector('.ms-dropdown');
button.addEventListener('click', function(event) {
var next = this.nextElementSibling;
if (next.style.display == "none") {
next.style.display = "block";
} else {
next.style.display = "none";
}
});
<div class="ms-dropdown p-3">
<div class="row no-gutters align-items-center">
<div class="col-auto"><img src="images/tr-flag.png" alt="" /></div>
<div class="col-auto ml-2">Budesliga <span>(16)</span></div>
</div>
</div>
<div style="display:none">
asdfasdf
</div>
<div class="ms-dropdown p-3">
<div class="row no-gutters align-items-center">
<div class="col-auto"><img src="images/tr-flag.png" alt="" /></div>
<div class="col-auto ml-2">Budesliga <span>(16)</span></div>
</div>
</div>
<div style="display:none">
asdfasdf
</div>
MayBe Or Maybe not What you looking for
var button = document.querySelectorAll('.ms-dropdown');
for(let i = 0 ; i < button.length;i++){
button[i].addEventListener('click', function(event) {
var next = this.nextElementSibling;
if (next.style.display == "none") {
next.style.display = "block";
} else {
next.style.display = "none";
}
})
};
Please try this
document.querySelectorAll('.ms-dropdown').forEach(function(item,i){
item.addEventListener('click',function(){
var next = this.nextElementSibling;
next.style.display = next.style.display == 'none' ? 'block' : 'none';
});
});
I know similar questions have been asked before but I'm new to Javascript and none of the answers could help me solve my problem.
What I'm trying to do:
four buttons that open modals
but like the title already says, is there no reaction until the buttons have been clicked twice.
Here's my html:
<a id="myBtn" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span id="x" class="close">×</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn2" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal2" class="modal">
<div class="modal-content">
<span id="x2" class="close">×</span>
<h1 class="contract">sample heading</h1>
<h2 class="sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn3" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal3" class="modal">
<div class="modal-content">
<span id="x3" class="close">×</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn4" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal4" class="modal">
<div class="modal-content">
<span id="x4" class="close">×</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
and here's the Javascript:
/*------------------------modal------------------------*/
function termsFct(buttonElement) {
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
var modal3 = document.getElementById('myModal3');
var modal4 = document.getElementById('myModal4');
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
var btn3 = document.getElementById("myBtn3");
var btn4 = document.getElementById("myBtn4");
var span = document.getElementById("x");
var span2 = document.getElementById("x2");
var span3 = document.getElementById("x3");
var span4 = document.getElementById("x4");
/*------------------------contract visibility------------------------*/
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
btn3.onclick = function() {
modal3.style.display = "block";
}
btn4.onclick = function() {
modal4.style.display = "block";
}
/*------------------------close if x was clicked------------------------*/
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal2.style.display = "none";
}
span3.onclick = function() {
modal3.style.display = "none";
}
span4.onclick = function() {
modal4.style.display = "none";
}
/*------------------------close if clicked outside------------------------*/
window.onclick = function(event) {
if (event.target == modal) {
modal.scrollTop = 0;
modal.style.display = "none";
}
else if (event.target == modal2) {
modal2.scrollTop = 0;
modal2.style.display = "none";
}
else if (event.target == modal3) {
modal3.scrollTop = 0;
modal3.style.display = "none";
}
else if (event.target == modal4) {
modal4.scrollTop = 0;
modal4.style.display = "none";
}
}
}
I would really appreciate it if someone could help me solve this problem and even better help me shorten the Javascript.
thanks in advance
Ken
The termsFct method is already fired when the button is clicked. so no need of an onclick inside this method.
Replace the btn.onclick section with the below code and add more cases.
Switch(buttonelement.id){
Case btn1:
Modal.style.display="block";
Break;
}