Modal disappearing instantly - javascript

I am a beginner, trying to implement 'click' event listener to pop up a modal. But as soon as I click the link the modal appears and disappear instantly.
const btn = document.getElementById(btn");
const modal= document.getElementById("modal");
const showModal = function (el, modalId) {
el.addEventListener("click", function () {
modalId.classList.remove("hidden");
});
};
showModal(btn, modal);
.hidden{
display: none
}
<a class='btn'> Click </a>
<div id='modal' class='hidden'> Modal Content </div>

you should define id="btn" on your a tag to be able to do
document.getElementById("btn")
const btn = document.getElementById("btn");
const modal = document.getElementById("modal");
const showModal = function(el, modalId) {
el.addEventListener("click", function() {
modalId.classList.remove("hidden");
});
};
showModal(btn, modal);
.hidden {
display: none
}
<a id="btn"> Click </a>
<div id='modal' class='hidden'> Modal Content </div>

Thanks You so much guys for responding. I found my mistake, I was using 'link' tag with empty 'href' attribute, due to which the page was reloading ever time I clicked it. I simply replaced the links with button tag and now it is working just fine.
Although I still want to know if it is possible to stop the page from reloading when link element is clicked.
Also, thank you for highlighting the 'class/id' typo.

Related

How to show hidden div onclick of button and hide when not in focus using JS

I'm trying to create add a way to show a div onclick of a button and hide it when not in focus / when user clicks outside the div.
I've already managed to add a button that can show a hidden div, but I can't figure out how to make it hidden again when focus is lost.
I've read this: Hide a DIV when it loses focus/blur
...and other articles, but I couldn't follow them to make it work..
Please see my code so far:
function openCardsList() {
let window = document.getElementById("anchor-cards-list");
window.style.display = "block";
}
$(document).not("#anchor-cards-list").click(function() {
$('#anchor-cards-list').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
<button id="anchor-open-cards-list-btn" onclick="openCardsList();">Collapse Maincard</button>
Any help would be appreciated. Thank you in advance!
you can use this code :
function openCardsList() {
let window = document.getElementById("anchor-cards-list");
window.style.display = "block";
}
function hideDiv(){
let window = document.getElementById("anchor-cards-list");
window.style.display = "none";
}
and add onclick event to parent div
div onclick="hideDiv()" style="height: 100vh;">
<div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
</div>
I'd personally simplify things to separate concerns. Add an event listener to the button (click) to show your div, and an event listener (blur) on the div to hide it again.
document.getElementById('anchor-open-cards-list-btn').addEventListener('click', showDiv);
document.getElementById('anchor-cards-list').addEventListener('blur', hideDiv);
Then showDiv and hideDiv just handle the element visibility.
Use jquery simple way
use toggle() instead of show/hide, because it is more clear and simple.
$(document).ready(function(){
$("#anchor-open-cards-list-btn").click(function(){
$("#anchor-cards-list").toggle();
});
});
OR
function openCardsList() {
$("#anchor-cards-list").toggle();
}
OR
For onblue you can also use this code
function openCardsList() {
$("#anchor-cards-list").css('display','block');
}
function hideD(){
$("#anchor-cards-list").css('display','none');
}
add onclick event in parent div
div onclick="hideD()">
<div id="anchor-cards-list">text</div>
</div>
i prefer to make let window outside the function so you can use it anytime needed. and also if you only make this for handle show/hide div while onclick and onblur you dont need jquery. the default javascript can deliver those event action.
script.js
let card = document.getElementById('anchor-cards-list')
function openCard() {
card.style.display = 'block'
}
function blurCard() {
card.style.display = 'none'
}
index.html
<div id="anchor-cards-list">Hello Text</div>
<button onclick="openCard()" onblur="blurCard()">Clik me</button>

Event listener on span requires me to refresh the page in order for it to be clickable

I have this problem which I know is a bug, if anyone has had the same problem could you explain it, essentially the span "excla" requires the user to refresh the page before they can click on it, after the user refreshes the page they can click on it how many times they want, I am trying to make it clickable from the get go, does anyone know why this is happening?
<div class="popupz" id="popupx" href="javascript:void(0);" href="javascript:;">
<span class="popuptext" id="myPopup">Content</span>
<span id="excla" class="ddop" onclick="myFunctionz()" style="background-color:#fff;"
href="javascript:void(0);" href="javascript:;">
!
</span>
</div>
<script>
// When the user clicks on div, open the popup
const element = document.getElementById("excla");
element.addEventListener("click", function() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
});
</script>
You seem to have a lot of extraneous code. I've trimmed it down to the minimum to show and hide myPopup
You just need to add in some css.
// When the user clicks on div, open the popup
const element = document.getElementById("excla");
element.addEventListener("click", function() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
});
#myPopup
{
visibility:hidden;
}
#myPopup.show
{
visibility:visible;
}
<div class="popupz" id="popupx">
<span class="popuptext" id="myPopup">Content</span>
<span id="excla" class="ddop" style="background-color:#fff;">
!
</span>
</div>

Cannot close <dialog> element with display set to grid

The HtmlDialogElement.close() function seems to have no effect on a <dialog> element when that dialog has its display style set to grid.
Does anyone happen to know why? Note that removing the display: grid allow the dialog to function correctly. I have seen this behavior on the latest versions of both Chrome and Firefox.
See minimum reproduction below. If you prefer, here's a Codepen: https://codepen.io/ChristianMay/pen/MWrmdzJ
let dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
dialog.close();
})
dialog {
display: grid;
}
<dialog class="dialog" open="">
Test
</dialog>
<button id="dialog-close">Close dialog</button>
The dialog is considered to be open (or shown) if the attribute open is present.
Once this attribute is not present, the dialog is hidden. I suppose that setting the display to grid overrides the default styling for dialog, which should hide the dialog whenever open is removed. We could restore this behavior by adding styling to the dialog without open attribute.
let dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
dialog.close();
})
dialog:not([open]){
display:none;
}
dialog{
display:grid;
}
<dialog class="dialog" open="">
Test
</dialog>
<button id="dialog-close">Close dialog</button>
Already answered , but you could also display <dialog> as a grid only if it is an opened dialog ;)
dialog[open] {
display: grid;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
The CSS attribute selector matches elements based on the presence or value of a given attribute.
Demo snippet using the CSS attribute selector
const dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
dialog.removeAttribute("open");
})
let openButton = document.querySelector("#dialog-open");
openButton.addEventListener('click', () => {
dialog.setAttribute("open", "");
})
dialog[open] {
display: grid;
}
<dialog class="dialog" open="">
Test
</dialog>
<button id="dialog-close">Close dialog</button>
<button id="dialog-open">Open dialog</button>
fork of your pen

Trigger DIV content on button click + change button text

I am trying to trigger the visibility of a DIV via a button.
My code looks like this:
function myFunction() {
var moreText = document.getElementById("csrmore");
var x = document.getElementById("myDIV");
let ishidden = x.classList.contains("hidden")
if (ishidden == true) {
x.classList.remove("hidden");
x.classList.add("shown");
moreText.innerHTML = "Show less";
}
else {
x.classList.remove("shown");
x.classList.add("hidden");
moreText.innerHTML = "Show more";
}
}
div {
width: 100px;
height: 100px;
}
.hidden {
display:none
}
.shown {
display:block;
}
<button id="csrmore" onclick="myFunction()">
Show more
</button>
<div id="myDIV" class="hidden">
This is the triggerable content.
</div>
Fiddle: https://jsfiddle.net/6zxa0Lg2/
It works fine, however since I am a JS starter, I was wondering if this is bad practice or is it a totally fine piece of code?
Thanks for every help :)
Here's another way to go about it. Make it all relative. The button is clicked and the javascript finds the content associated to that button to show/hide. This way you don't need any ID tags and you can have as many show/hide buttons as you want on the page.
document.addEventListener('DOMContentLoaded', () => {
// after the page loads...
document.querySelectorAll('.csrmore').forEach(button => {
// find all the 'show more' buttons and for each one...
button.addEventListener('click', e => {
// when someone clicks this button
let content = e.target.closest('.container').querySelector('.content');
// find the content div associated with this button
content.classList.toggle('hidden');
// toggle on or off the content
e.target.innerText = content.classList.contains('hidden') ? 'Show more' : 'Hide';
// change the text of the button
})
})
})
div {
width: 100px;
height: 100px;
}
.hidden {
display: none
}
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>
<hr>
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>
This is a fine way to do this! This is not the solution I would not have come up with, but it is actually pretty clever. I would have thought to have done it by toggling TARGET.style.visibility to either "hidden" or "visible" when clicking the button. Again though, your code looks perfectly fine!

Button onclick not allowing my window to appear

I'm having a tough time following this little tutorial on how to create a modal window when a button is clicked.
Not sure if my html is correct (the modal window is at the very bottom), but when I click on save list button nothing happens, only a refresh. I'm using Visual Studio Code with the live server plugin if that has anything to do with it. It did work when using a simple alert('hello').
For reference here is my codepen: https://codepen.io/OMantid/pen/pobLKWx
HTML
<form id='myModal' class= 'Modal is-hidden is-visuallyHidden'>
<div class='Modal-content'>
<label for='list-name'>Name:</label>
<input type='text' name='list-name' id='list-name'>
<div class='modal-btn-container'>
<button name='save-listName'>Save</button>
<button name='cancel-listSave' class='cancel-btn'>Cancel</button>
</div>
</div>
</form>
JS
//Get the modal
let modal = document.getElementById('myModal');
//Get the main container and the body
let main = document.getElementsByTagName('body');
let header = document.getElementsByTagName('header');
//Get the open button
let saveBtn = document.getElementById('save-btn');
saveBtn.onclick = function() {
modal.className = 'Modal is-visuallyHidden';
setTimeout(function() {
main.className = 'is-blurred';
modal.className = 'Modal';
}, 100);
}
Thank you.

Categories