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
Related
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.
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!
Hi I would like to create a horizontal scroll like this: https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp but when the user click in the link a pop up opens. Thanks!
First make a pop-up with HTML and CSS
Use JavaScript to handle visibility.
Here is a sample code.
let openPopup = document.getElementById('show-pop-up')
let closePopup = document.getElementById('close-pop-up')
openPopup.addEventListener('click', function(){
document.getElementById('pop-up').style.display = 'block'
openPopup.style.display = 'none'
})
closePopup.addEventListener('click', function(){
document.getElementById('pop-up').style.display = 'none'
openPopup.style.display = 'block'
})
#pop-up {
display: none
}
<div id="pop-up">
<h5 id="pop-up-title">Pop up sample title.</h5>
<div class="pop-up-content">
<p>This is a sample pop up content.</p>
</div>
<button id="close-pop-up">Close Pop Up</button>
</div>
<button id="show-pop-up">Show Pop Up</button>
I have a task in school and I think Javascript is really hard. Now in the beginning I need to google everything and I only find solutions in different libraries.
In this case I need to use Vanilla JS. When I click on logout button it need to toggle and show the login button.
In the task I cant change the HTML only add JS.
// student
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>
You can add click event listeners to both of the buttons to change its own display to none and display the other button.
var login = document.querySelector('.signin-btn'),
logout = document.querySelector('.signout-btn');
login.addEventListener('click', function(e){
this.classList.add('is-hidden');//adds is-hidden class
logout.classList.remove('is-hidden');//removes is-hidden class
});
logout.addEventListener('click', function(e){
this.classList.add('is-hidden');
login.classList.remove('is-hidden');
});
.is-hidden{
display: none;
}
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>
here's a extremely basic way to do it, I would recommend using more advanced techniques later
function change() {
document.getElementById('but').style.display = "none"
document.getElementById('butother').style.display = "block"
}
function changeother() {
document.getElementById('butother').style.display = "none"
document.getElementById('but').style.display = "block"
}
<html>
<body>
<button id="but" onclick='change()'>log in </button>
<button id="butother" onclick='changeother()'>log out </button>
</body>
</html>
I am using Google's Material Design.
I have put a dialog in but it doesn't seem to close in Safari. (It does close in Chrome).
Dialog:
<dialog class="mdl-dialog">
<h4 class="mdl-dialog__title">Question Help</h4>
<div class="mdl-dialog__content">
<p>
Help text will go here dynamically.
</p>
</div>
<div class="mdl-dialog__actions">
<button type="button" id="closeModal" class="mdl-button close">Close</button>
</div>
</dialog>
Javascript rendering the Dialog:
let dialog = document.querySelector('dialog');
let showDialogButton = document.querySelectorAll('.show-dialog');
let i;
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
for (i = 0; i < showDialogButton.length; ++i) {
showDialogButton[i].addEventListener('click', () => {
dialog.showModal();
});
}
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
I have console.log(); inside the event listener and it isn't getting inside the function. But it is picking up the .close element. So I don't think the event listener is firing?
Any ideas why the dialog doesn't close?
Move the dialog under the <body>
From the dialog polyfill docs:
Modal dialogs have limitations-
They should be a child of <body> or have parents without layout (aka,
no position absolute or relative elements)