I have created a modal in my html file. I open it by clicking in a button and then I execute a method
This js method is the following:
openModal() {
var modal = document.getElementById('myModal');
modal.style.display = "block";
}
and it works. Now what I want to do is to close it by clicking in the body of my website so I have added 3 lines:
openModal() {
var modal = document.getElementById('myModal');
modal.style.display = "block";
$(document).on('click', 'body *', function () {
modal.style.display = "none";
});
}
The problem seems to be that one click on my mouse is more than one to the computer so it always executes:
modal.style.display = "block";
and then with the same click he calls also the click of:
$(document).on('click', 'body *', function () {
modal.style.display = "none";
});
and it executes it`
I have also created a listener:
openModal() {
var modal = document.getElementById('myModal');
modal.style.display = "block";
modal.addEventListener('click', function () {
$(document).on('click', 'body *', function () {
modal.style.display = "none";
});
});
}
and it works for the first time but after closing it the listener keeps working so I can not do anything else (it always executes the listener line)
UPDATE
I have tried also:
openModal() {
console.log("OpenModal")
var modal = document.getElementById('myModal');
modal.style.display = "block";
modal.addEventListener('click', function () {
console.log("EventListener")
$(document).on('click', 'body *', function () {
modal.style.display = "none";
modal.removeEventListener('mousemove', function () { console.log("NoEventListener") });
});
});
}
the behavior is the following:
I click on one button, and I call to openModal (console.log("OpenModal") is working). The modal appears, I click on body and the event is triggered (console.log("EventListener") is displayed). After it, it does not appear console.log("NoEventListener") so removeEventListener is not working.
Then, when I click again to the button, I call again to addEventListener directly.
What I need is to finish the eventListener
You need to detect where is clicked into. Is the click is into .modal.
$(document).on('click', function (e) {
if (!$(e.target).parents('.modal').length || ! $(e.target).is('.modal')) {
modal.style.display = "none";
}
});
In your modal function, you can get the current display style and change display
according to its value :
openModal() {
var modal = document.getElementById('myModal');
var statut = modal.style.display;
if (x === "block" {
modal.style.display = "none";
}
else {
modal.style.display = "none";
}
}
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!
Ok, I managed to add a video inside a modal, but now I'm a little lost, because I can't pause the video when I leave the modal.
I tryed a lot of things and searched a lot here too, but I only find jQuery solutions and I'm looking for a vanilla solution...
my js code:
var modal = document.getElementById("myModal");
var btn = document.getElementById("myVideo");
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";
}
}
You can use YouTube Iframe player API to handle the video (iframe), and after the player is initialized you can simple do:
span.onclick = function() {
modal.style.display = "none";
player.pauseVideo();
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
player.pauseVideo();
}
}
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
I have two modal buttons for pricing purpose, one is for lower and another for higher pricing.
If someone has paid for the lower product. The lower modal button disappears but he/she can still see the modal button for higher.
If someone has paid for the higher product, both modal buttons disappear.
Now if the user has not paid at all he/she can see both modal buttons and with my present coding both modals working fine.
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
var btn = document.getElementById("modalbutton");
var btn2 = document.getElementById("modalbutton2");
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close2")[0];
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal2.style.display = "none";
}
HTML:
<button class="btn btn-default" id="modalbutton">Purchase low</button>
<button class="btn btn-default" id="modalbutton2">Purchase high</button>
Issue:
When the user has paid for low, the low button disappears, but the modal button for higher remains. But on clicking it the modal doesn't open.
Error:
Uncaught TypeError: Cannot set property 'onclick' of null at
btn.onclick = function() {
modal.style.display = "block";
}
Why it is going for btn and not directly to btn2. How can I rectify this. Thanks.
I think I found an answer of handling the null. So i placed a check,
if (btn !== null){
btn.onclick = function() {
modal.style.display = "block";
}
}else{
btn2.onclick = function() {
modal2.style.display = "block";
}
}
The modal opens.
Afterwards it showed the error, on clicking the event of close. Stating the low button was undefined. so I placed a check for that too
if (span !== undefined){
span.onclick = function() {
modal.style.display = "none";
}
}else{
span2.onclick = function() {
modal2.style.display = "none";
}
}
This is some sort of handling of error. If someone has better way to handle this. kindly share.
Now I am not a star really with Javascript, but i seem to encounter the all known problem with mobile devices and the onclick function. Onclick requires a mouse action where off course on the phone that doesnt apply. Now in Jquery, you can use "on" .. but how does this work with regular javascript?
// Get the modal
var modal = document.getElementById('reserveer-modal');
// Get the button that opens the modal
var btn = document.getElementById("reserveer-knop");
// 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() {
var x = window.innerWidth;
if (x > 768) {
//event.preventDefault();
modal.style.display = "block";
} else {
//event.preventDefault();
}
}
// 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";
}
}
Try to change onclick to addEventListener and see if that helps you..
// When the user clicks the button, open the modal
btn.addEventListener('click', function () {
var x = window.innerWidth;
if (x > 768) {
//event.preventDefault();
modal.style.display = "block";
} else {
//event.preventDefault();
}
});
You can also pass named function to addEventListener
Binding the click event listener to the element should fix the problem you've been having.
btn.addEventListener("click", function() {
var x = window.innerWidth;
if (x > 768) {
//event.preventDefault();
modal.style.display = "block";
} else {
//event.preventDefault();
}
});
Alternatively, you could try using the touchstart event, which works just like the "mousedown" event, just for mobile.
elem.addEventListener("touchstart", handler);
Your code would look like this:
btn.addEventListener("touchstart", function() {
var x = window.innerWidth;
if (x > 768) {
//event.preventDefault();
modal.style.display = "block";
} else {
//event.preventDefault();
}
});
Had the same issue, after setting z-index to 100 it worked.
Seems like in my case there was a z-index issue.
Make sure you don't have any async/await functions in your code or any arrow functions () => {}. Mobile browsers seem to use older versions of JavaScript before async/await or arrow function were introduced.