I am trying to get this button to run the function. I know I can get rid of 'function showWeb' in the Javascript and the code will be running fine, I am trying to get it to work so that I can use it as a function so I can make an instance of the object.
<button id='myBtn' onclick='showWeb()'>Open Modal</button>
<div id='myModal' class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<p>$link</p>
</div>
</div>
<script>
function showWeb(){
// 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";
}
}
}
</script>
I'm not sure what you are trying to get at, but please do consider that a function must only do a single task, it would be great if you refactored your code this way.
function openModal() {
var modal = document.getElementById('myModal');
modal.style.display = "block";
}
function closeModal() {
var modal = document.getElementById('myModal');
modal.style.display = "none";
}
window.onclick = function(event) {
var modal = document.getElementById('myModal');
if (event.target == modal) {
modal.style.display = "none";
}
}
<button id='myBtn' onclick='openModal()'>Open Modal</button>
<div id='myModal' class='modal'>
<div class='modal-content'>
<span class='close' onclick='closeModal()'>×</span>
<p>$link</p>
</div>
</div>
First of all, you wouldn't want to retrieve the button inside the function.
Second of all, those onclick events are not being attached right (typo in this case)
what you want to do is:
var modal = document.getElementById('myModal');
var btn = document.getElementById('myBtn');
var span = document.getElementsByClassName('close')[0];
btn.addEventListener('click', showModal());
span.addEventListener('click', hideModal());
function showModal() {
modal.style.display = 'block';
};
function hideModal() {
modal.style.display = 'none';
};
window.addEventListener('click', function(event) {
if (event.target != modal) { // needs to be anything but the modal, from what i can understand
hideModal();
}
});
#myModal {
display: none;
background: #dd4535;
}
<button id='myBtn'>Open Modal</button>
<div id='myModal' class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<p>$link</p>
</div>
</div>
No jquery this time, since it was obviously not well accepted. Just plain JS
Related
I am attempting to display a modal with results of a php query, after a button is submitted, but the modal flashes onto the screen, instead of remaining until it is manually closed, due to the fact that submitting a form refreshes the page.
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("submitForm");
var span = document.getElementsByClassName("close")[0];
var form = document.getElementsByClassName("myForm")[0];
btn.addEventListener('click', openModal);
function openModal() {
form.submit();
modal.style.display = "block";
console.log("shiet");
}
span.addEventListener('click', closeModal);
function closeModal(){
modal.style.display = "none";
}
window.addEventListener('click', function(event){
if (event.target == modal) {
modal.style.display = "none";
}
});
</script>
On clicking the button id=submitForm, I want a modal to pop up, containing the results of a php script. This modal can then be closed by clicking off the screen or by activating closeModal, by clicking a span element.
Try this:
window.addEventListener('click', function(event){
if (event.target != modal) {
modal.style.display = "none";
} else {
modal.style.display = "block";
}
});
Here I meant that if the user is clicking on the window but not on the modal, then hide that; else keep the modal visible...
I think the modal flashes because of this reason!
I hope this works!
I followed the w3schools tutorial for modals https://www.w3schools.com/howto/howto_css_modals.asp but when i click on the button, nothing happens. I've actually followed two previous modal tutorials and on each one, nothing happens when i click the button. I've checked that the external js file is working.
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu h4").click(function() {
$("nav ul").toggleClass("active")
})
})
//modal
var modal = document.getElementsByClassName('modal-container');
// Get the button that opens the modal
var btn = document.getElementsByClassName("modal-btn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal[0].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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="modal-btn"> Click me</button>
<div class="modal-container">
<div class="modal-content">
<span class="close">×</span>
<p> Some text in modal</p>
</div>
</div>
getElementsByClassName returns an object (NodeList) that resembles an array, and doesn't return a single element as you were expecting
getElementById returns a single element, and that's what you should be using for a modal
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu h4").click(function() {
$("nav ul").toggleClass("active")
})
})
//modal
var modal = document.getElementsByClassName('modal-container')[0];
// Get the button that opens the modal
var btn = document.getElementsByClassName("modal-btn")[0];
// 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="modal-btn"> Click me</button>
<div class="modal-container">
<div class="modal-content">
<span class="close">×</span>
<p> Some text in modal</p>
</div>
</div>
I have a modal which I would like to call with two buttons with different IDs. The reason is that one button is displayed on desktop and the other on mobile view (responsive). display: none does do the trick of using two times the same ID.
The modal:
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="closecross">×</span>
<!-- Modal content -->
<div class="modal-content">
<p>Content</p>
</div>
</div>
The modal as JS:
// 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("closecross")[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";
}
};
My two buttons:
<div class="insertClass" id="myBtnMobile">Modal</div>
And
<div class="insertClass" id="myBtn">Modal</div>
I tried to use getElementsByClassName('.myBtnMobile','.myBtn') but it does not work with my JS.
The code I am using is from https://www.w3schools.com/howto/howto_css_modals.asp just to provide some potential playground.
Thanks in advance!
Working fiddle
You could use queryselectorAll() :
var divs = document.querySelectorAll('#myBtnMobile,#myBtn');
divs.forEach(function(div) {
div.addEventListener("click", clickEvent);
});
function clickEvent() {
console.log('Div ' + this.id + ' Clicked');
}
<div id="myBtnMobile">Modal</div>
<div id="myBtn">Modal</div>
You can just use this:
<div class="insertClass" id="myBtnMobile" onclick="yourfunction()">Modal</div>
<div class="insertClass" id="myBtn" onclick="yourfunction()">Modal</div>
or
document.getElementById("myBtnMobile").addEventListener("click", yourfunction);
document.getElementById("myBtn").addEventListener("click", yourfunction);
Or use
<button class="...">
not
<button id="...">.
One more possible solution:
var buttons = document.getElementsByClassName('insertClass');
for (var i = 0; i < buttons.length; i++)
{
buttons[i].onclick = function() {
document.getElementById('myModal').style.display = 'block';
}
}
https://jsfiddle.net/43gkcm92/24/
you may this way to trigger two ID with same action
$('#myBtnMobile,#myBtn').click(function () {
// your logic
});
You need to access the class and not the ids:
document.getElementsByClassName("insertClass");
I'd like to add another "Cancel" button on the bottom of the modal in addition to the span option to close the modal. Not sure where to go from here please advise on some options. Thanks
<!-- The Offer Modal-->
<!-- Trigger/Open The Modal -->
<button id="makeOfferBtn">Make an Offer</button>
<!-- The Offer Modal content -->
<div id="myOfferModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myOfferModal');
// Get the button that opens the modal
var btn = document.getElementById("makeOfferBtn");
// 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>
This is a quick and dirty example that will work with any number of buttons that has the .close class defined:
// Selecting all nodes that are `.close`
var closeBtns = document.querySelectorAll('.close');
// Iterating over on all of them and
// attaching handlers for the 'click' event.
for (var i = 0, max = closeBtns.length; i < max; i++) {
var close = closeBtns[i];
close.addEventListener('click', function() {
modal.style.display = 'none';
});
}
However, I would recommend to restructure your code a bit in order to not to use so many global variables.
I am working on a shopify store, there is a 'remove from cart' option on the cart page, when they click on it a popup shows up to confirm if they want to remove it from the cart.
The issue I am having is that the popup will only work on the first item, the others will just take you back to the top of the page.
Here's the code I am using.
The remove text
<td style="text-align: center">
X
</td>
The Popup
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p class="modal-index-title">Hey!</p>
<p class="modal-title">Are you sure you want to remove this?</p>
<div class="modal-confirm">
<span class="close">No!</span>
<p>Yes</p>
</div>
</div>
</div>
The script
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("cart_popup");
// 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";
}
}
IDs are supposed to be unique for a DOM element so your JS code will just grab the first instance of the cart_popup element and apply the onClick there.
If you want to make it apply across all your remove cart buttons, add a CSSclass to it and then apply the btn.onclick function to buttons having that class.
EDIT:
Example:
var classname = document.getElementsByClassName("classname");
var showModal = function() {
modal.style.display = "block";
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', showModal, false);
}
You might have several elements with the same id attribute. Only the first triggers your btn.onclick function.