I am having some issues with closing my modal pop-up forms, one of them closes, though the other one does not. I am not really sure where the problem lies, it must be something trivial though. I have just started learning JS seriously, so I'd appreciate some help with it.
I must add that both of the modals open just fine.
// Get the modal
var modal = document.getElementById('modal');
// Get the button that opens the modal
var btn = document.getElementById("regbtn");
// Get the modal
var signinmodal = document.getElementById('signinmodal');
// Get the button that opens the modal
var signinbtn = document.getElementById("signinbtn");
// 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 the button, open the modal
signinbtn.onclick = function() {
signinmodal.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";
}
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
signinmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target === signinmodal) {
signinmodal.style.display = "none";
}
}
When you assign window.onclick = ... twice you override the last assignment to it, just like if you would assign a value to a variable:
val = 5;
val = 7; // 5 is now gone
You should combine them to the same function call to ensure that the events will persist
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
if (event.target === signinmodal) {
signinmodal.style.display = "none";
}
}
The same applies for the span tag
span.onclick = function() {
modal.style.display = "none";
signinmodal.style.display = "none";
}
Related
For this webpage: https://www.wonderewereldvan.be/VakantieinBelgie/KalenderTest2.html I would like have a direct link to a modal popup.
Off course I searched Stackoverflow for possible solutions, and I tried several ones. However when using https://www.wonderewereldvan.be/VakantieinBelgie/KalenderTest2.html#myModal it doesnt't open the modal window.
The last piece of code I tried was
function popModal() {
// code to pop up modal dialog
}
var hash = window.location.hash;
if (hash.substring(1) == 'myModal') {
popModal();
}
Those are the details of the popup:
<div class="modal" id="myModal">
The code I found on W3Schools
<script>
// 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>
Many thanks in advance for your help!
You can put the existing code into an event handler named hashchange :
window.addEventListener("hashchange", () => {
var hash = window.location.hash;
if (hash.substring(1) == "myModal") {
popModal();
}
});
Read more about this handler in MDN hashchange
I'm getting the error "Uncaught TypeError: Cannot set property 'onclick' of null" in the console. Below is the code.
// 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 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";
}
}
The modal window functions just fine on my site. Not sure why I'm seeing this error in the console. Does anyone know how to correct this or if it's something that I really need to worry about? Thx
Ive been working on this for hours, I've tried vars, I tried hiding elements, and nothing is working and and and.. sorry for the exitement, but I'm almost down to the end,
the issue:: I have a basic javascript modal, taken from w3 schools, which has been altered slightly per my needs,
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
my javascript code is below.
What I need is, I need to hide the CLOSE span when the modal pop up is hidden,
<span class="close">CLOSE</span>
in other words, I dont want the close link showing at all times, thw close link should be hidden when modal os closed, and showing when modal is open.
here is my code below, can I please get a working javascript example.
Any help would be greatly appreciated
function closeModal() {
modal.style.display = "none";
}
// 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 spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
closeBtn.onclick = closeModal;
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>```
If I understand you correctly.
Try this:
function closeModal() {
modal.style.display = "none";
for (let closeBtn of spans) {
closeBtn.style.display = 'none';
}
}
// 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 spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
closeBtn.onclick = closeModal;
closeBtn.style.display = 'none';
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
for (let closeBtn of spans) {
closeBtn.style.display = 'inline';
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
for (let closeBtn of spans) {
closeBtn.style.display = 'none';
}
}
}
</script>```
It would be better if we put out the repeating code in separate functions.
Just add to your show/hide function appropriate hide/show span:
Change closeModal() to:
function closeModal() {
modal.style.display = "none";
spans[0].style.display = "block";
}
and change btn.onclick to:
btn.onclick = function() {
modal.style.display = "block";
spans[0].style.display = "none";
}
I see you are using getElementsByClassName() which is returning (always) array of results (thats why I'm using index ([0]) to access found element). If I were you I would add new id to the span so you can be sure what you target.
Have a look at Changing HTML style
I'm trying to build a mega menu with the code below.
This is the link from the menu to show the mega menu
<li><a href="javascript:void(0);" id="mmBtn"></li>
And this is the javascript
// Get the modal
var modal = document.getElementById('mmCat');
// Get the button that opens the modal
var btn = document.getElementById("mmBtn");
// Closes the modal
var span = document.getElementsByClassName("close")[0];
// Open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// Close the modal
span.onclick = function() {
modal.style.display = "none";
}
// Close it from outside
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Is it possible to use a link like this instead to get the ID and not reload the page and not showing the hashtag in addressbar?
<a href="test.com/products#mmBtn">
The 'id03' seems working when user clicked outside of the modal then it will close, while 'id02' and 'id01' didnt works. User clicked outside the modal then nothing happens
<script>
function messagesending(e) {
document.getElementById("id01").style.display="block";
}
function refusealert(e) {
document.getElementById("id02").style.display="block";
}
function confirmalert(e) {
document.getElementById("id03").style.display="block";
}
<script>
// Get REFUSE modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get CONFIRMATION modal
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get SENDMESSAGE modal
var modal = document.getElementById('id03');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
$(document).ready(function(){
$("#oni").click(function(){
$("#container").toggle(1000);
});
</script>
Is there something that i missed? Basically 'id01', 'id02', 'id03' are in same css code, i just copied and paste with different content. Please refer to this https://jsfiddle.net/r3qt7fdg/
As kwiat1990 mentioned the problem is, what I read from your code, the var modal, which is global, gets overridden, and ends up as document.getElementById('id03'). The code inside the onclick functions is executed after the click. At that time event.target == modal will only be true for the sendmessage modal.
The easy fix is to move var modal inside the click function, making it local to the function. I've also removed the excess script tags and properly closed the $(document).ready function.
EDIT: of course window.onclick will set onclick property of window, so each one was overwriting the other and only the last one saved. So, adding event listeners was needed:
<script>
window.addEventListener("click", function(event) {
// Get REFUSE modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
if (event.target == modal) {
modal.style.display = "none";
}
});
window.addEventListener("click", function(event) {
// Get CONFIRMATION modal
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
if (event.target == modal) {
modal.style.display = "none";
}
});
window.addEventListener("click", function(event) {
// Get SENDMESSAGE modal
var modal = document.getElementById('id03');
// When the user clicks anywhere outside of the modal, close it
if (event.target == modal) {
modal.style.display = "none";
}
});
</script>
https://jsfiddle.net/r3qt7fdg/1/
Also, 1 event listener will be enough, for instance by checking the className of the element:
window.addEventListener("click", function(event) {
// When the user clicks on element with class="modal", close it
console.log(event.target); // element that was clicked
if (event.target.className == "modal") {
event.target.style.display = "none";
}
});
https://jsfiddle.net/r3qt7fdg/2/
Maybe better is listen for click on ".modal" itself. In jquery it would be:
$(".modal").click(function() {
if (event.target.className == "modal") {
$(event.target).hide();
}
});
var modalA = document.getElementById('id01');
// Get the modal
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
//alert(event.target)`enter code here`
if (event.target == modal) {
modal.style.display = "none";
}
if(event.target == modalA) {
modalA.style.display = "none";
}
}