Hide 'close' links when modal is not open - javascript

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

Related

Direct link to a modal window doens't work

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

How To: Have 2 seperate buttons to close modal pop up?

I have a basic modal pop up from w3 schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal, and I want to use two links to close the modal, but when I try, nothing works, because both links that I add to close the modal stop working when I try to have 2 links to close the modal
Here is the link that closes the modal
Here is the 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("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";
}
}
How can I add this button with class "close"
And also!! this button with class "close-2"
<span class="close-2"></span>
so I can have 2 buttons to close the modal, any help would be great appreciated
Firstly what you would do is set both close buttons as having the same class, so class="close".
Also use a single function for closing the modal dialog such as
function closeModal() {
modal.style.display = "none";
}
Then replace the following
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
with
var spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
closeBtn.onclick = closeModal;
}
The reason one of close buttons ceases to work is because document.getElementsByClassName() returns a HTMLCollection which represents a collection of found elements. Also the getElementsByClassName("close")[0] call returns the first element in the collection and as such only one close button receives the onclick event. To fix this, the solution is to not get only the first element but all of the elements then iterate through all of them and add the onclick handler to all the elements as demonstrated.
The class attribute unlike the id attribute does not have to be unique and as such both can have the same close value.
Complete working example:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
close
<p>Some text in the Modal..</p>
</div>
</div>
<script>
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>

Having issues closing modal forms with Javascript

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";
}

Add a variable from a Post ID within a loop to a Modal Query getElementByID

I have a page which has 2 (but the potential of many many more) buttons which open up modal windows, each modal has a form and some text on it which is individual to that button.
All of these items are called from a Custom Post Type from within WordPress.
The issue I'm having is that I'm currently using a Modal Window JS and CSS:
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
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";
}
}
Then it's using the usual to open have the details for the Modal within the loop for the item on my page.
My issue is, is that the id is individual, so it only works once. I need to find a way to allow for a post_ID from the loop to be involved in the opening. I have tried adding "> and then changing out the var modal = document.getElementByID('myModal'); to document.querySelector("[id^='myModal-']"); but this didn't work.
The code is currently being used here: https://www.ubersmith.com/webinars-and-events/
You will see that the first "On Demand" link works but the second doesn't.
Can anyone help me work this out? I'm sure that I'm just missing one bit of the puzzle.
Any help would be great!
Thanks in advance :)
Your problem is that document.getElementById and document.querySelector will only ever get one element. Instead, change the modal and button ids to a class-name, say modal and modal-trigger. Then, find all of the article elements, and add the event listeners in a loop. For example,
var articles = document.querySelectorAll("article");
for (var i = 0; i < articles.length; i++) {
var article = articles[i];
var modal = article.querySelector(".modal");
var button = article.querySelector(".modal-trigger");
var closeButton = article.querySelector(".close");
// if there is no modal, ignore this article
if (!modal) continue;
button.onclick = function() {
modal.style.display = "block";
}
closeButton.onclick = function() {
modal.style.display = "none";
}
// add event listener instead so it can be added multiple times
window.addEventListener("click", function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
}
Thanks Jay :) I took what you did and found the solution:
var modalBtns = [...document.querySelectorAll(".register")];
modalBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block";
}
});
var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.closest('.modal');
modal.style.display = "none";
}
});
window.onclick = function(event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
}
This did the job :)
Thanks for your help :)

getElementById from url hashtag

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">

Categories

Resources