Google's MDL - Dialog not closing in Safari - javascript

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)

Related

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

Modal disappearing instantly

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.

Open Modal javascript with horizontal scroll

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>

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.

Close jquery modal

I'm importing Jquery Modal from these two links (js and css)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
I've added the following html code inside the body
<button onclick="load();" class="btn btn-primary">
<span class="fa fa-icon fa-filter"></span>
Filtrar
</button>
<div id="loadingModal" class="" style="display:none">
Cargando
</div>
and the following is in a js file
function load() {
openLoadingModal();
doSomething();
closeModal();
}
function openLoadingModal(e) {
$("#loadingModal").modal("show");
var count = 0;
var points = "";
var intervalId = window.setInterval(function(){
count++;
$("#loadingModal").text("Cargando" + ".".repeat(count % 3 + 1));
}, 1000);
return intervalId;
}
With this, the modal opens as I expect. The thing is that I want to close the modal when this ends. But the solutions I've found didn't work. I tried the following:
$("#loadingModal").modal("close");
$("#loadingModal").modal().close();
$("#loadingModal").modal().close;
$("#loadingModal").modal("toggle");
$("#loadingModal").modal().toggle();
None of this closes the modal as it should (maybe hides the modal, but not all of it, since there is a black screen)
I think this shouldn't be this hard, but every link I get in tells me to do one of this
Thanks
If there is only one modal on the page, use this:
$.modal.close();

Categories