I'm using the latest HTML5 dialog element. And I use showModal to display multiple dialogs. So how do I get the topmost dialog element when multiple dialog elements are visible?
The dialog element does not seem to have this functionality built in. I think the only solution is to manually track your open dialogs.
Whenever a dialog is opened, append it to an array. The last item in the array will always be your active (topmost) dialog.
function show(dialog) {
dialog.showModal();
openDialogs.push(dialog);
logTopDialog();
}
function close(dialog) {
const i = openDialogs.indexOf(dialog);
if (i !== -1) {
openDialogs.splice(i, 1);
}
logTopDialog();
}
function logTopDialog() {
console.log(`Top dialog = ${openDialogs.at(-1)?.id}`);
}
const openDialogs = [];
btn1.addEventListener('click', e => show(dialog1));
btn2.addEventListener('click', e => show(dialog2));
dialog1.addEventListener('close', _ => close(dialog1));
dialog2.addEventListener('close', e => close(dialog2));
<dialog id="dialog2">
<form method="dialog">
<p>Second dialog!</p>
<button>Close</button>
</form>
</dialog>
<dialog id="dialog1">
<form method="dialog">
<p>This is the first dialog here.</p>
<button id="btn2" type="button">Open Dialog 2</button>
<button>Close</button>
</form>
</dialog>
<button id="btn1">Open Dialog 1</button>
Related
I'm currently utilizing .closest in vanilla js to find a div(modal container) with a certain class, then on click of the button closes that div(modal container). all works fine, but the issue i'm running into now is I need to find either one of two divs(two different types of modals). So depending which one of these "div (modal containers)" are closest to the button - close that modal.
<div class="modal-a">
<div class="modal__header">
<button class="btn" data-close-btn>close</button>
</div>
</div>
<div class="modal-b">
<button class="btn" data-close-btn>close</button>
</div>
//-------------- Javacript
const closeBtn = querySelectorAll(['data-close-btn]);
closeBtn.forEach(button => {
const modal = button.closest('.modal-a'); // works as expected
button.addEventListener('click', (e)=> closeModal(modal));
});
function closeModal(modal) {
modal.classList.remove('.active');
}
what im trying to achieve
const modal = button.closest('.modal-a') || button.closest('.modal-b');
const modal = button.closest('.modal-a, .modal-b');
both these obviously fails the first time but works thereafter although in the console there is always a failure on click, so how do i write this to only use the relevant selector?
Hope this makes sense what im trying to explain.
You can use a single eventlistener and event delegation for that:
document.addEventListener("click", e => {
target = e.target.closest(".modal-a, .modal-b")
if(!target || !e.target.matches("[data-close-btn]")) return;
alert("You clicked a modal-Button")
})
<div class="modal-a">
<button class="btn" data-close-btn>close</button>
</div>
<div class="modal-b">
<button class="btn" data-close-btn>close</button>
</div>
<h2>Button outside of any Modal</h2>
<button class="btn" data-close-btn>close</button>
I have added a close button to a div in Calendly popup in VueJS and I want to close this div when click on the close button. How can I do this?
This is my Calendly Code:
<TransitionRoot as="template" :show="openTimes">
<Dialog
as="div"
class="fixed inset-0 overflow-y-auto"
#close="closeModal"
:open="openTimes"
:initialFocus="closeModalTimesRef"
>
And this is the button I have added
<button type="button" class="close"
#click="$emit('close')"> X
</button>
You probably want to use the v-if directive (or other methods of conditional rendering available in the link).
Usually you set a key like: showDialog: true in your data/state object and add it to your dialog and catch the close event like so:
<script>
data() {
return {
showDialog: true;
};
},
</script>
<template>
<dialog
v-if="showDialog"
#close="showDialog = false;"
/>
</template>
You can use something like this :
<button onclick="showOrCloseDiv()">Click The Button</button>
<div id="thedivid">
JS tuto
</div>
<script>
function showOrCloseDiv() {
var v = document.getElementById("thedivid");
if (v.style.display === "none") {
v.style.display = "block";
} else {
v.style.display = "none";
}
}
</script>
Using the HTML 5.2 native <dialog> element I can open the dialog using Javascript.
document.addEventListener('DOMContentLoaded', () => {
const dialog = document.getElementsByTagName('dialog')[0];
dialog.showModal();
});
How can I use Javascript to close the dialog?
The dialog can be opened, and closed using the open() and close() methods. The downside to using these methods is the CSS pseudo-element ::backdrop won't work.
<button id="open">Open Dialog</button>
<button id="close">Close Dialog</button>
<dialog id="dialog">
<h2>Dialog Title</h2>
<p>Dialog content and other stuff will go here</p>
</dialog>
<script>
const dialog = document.getElementById("dialog");
document.getElementById("open").addEventListener("click", () => {
dialog.show();
});
document.getElementById("close").addEventListener("click", () => {
dialog.close();
});
</script>
I tried to add the next button on the popup box. Now it is run popups in a specific order. Also, when the final popup open, the button disable automatically. but there is an issue. when I delete some modal, the code is not working. I want to run popups in that order and when I delete some popup, the popups want to run correctly. Also, I want to create the previous button. how can I do it? please help me to fix the issue.
Here is the code I used.
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal++)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
<input class="getAssignment" type="button" value="Open Modal">
<div id="openModal" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
https://jsfiddle.net/Sanjeewani/q1tm8ck2/10/
The condition which you are using in js returns always true and length of the array is not boolean so you do require it to compare it with an integer. Sample below:
$("*[data-modalorder="+currentmodal+"]").length==0
$(document).ready(function() {
$(".getAssignment2").click(function() {
var pNode = $(this).closest(".modalDialog");
if(pNode.prev(".modalDialog")){
var id = pNode.prev(".modalDialog").attr("id");
window.location.href = "#" + id;
}
});
$(".getAssignment").click(function() {
var pNode = $(this).closest(".modalDialog");
if(pNode.next(".modalDialog")){
var id = pNode.next(".modalDialog").attr("id");
window.location.href = "#" + id;
}
});
});
See this code:
https://www.w3schools.com/code/tryit.asp?filename=FFFP03OMYA94
I've got two buttons (or even more). When I click on the first button, it should display the first div. When I click on the second button, it should display the other div.
This is only a snippet of my problem. I want to achieve, that when I click on a button, then it should open the div with the passed ID. Normally I have an unique ID, so I could also save the ID like this:
<div id="myModal+${person.id}" class="modal">
My problem is: How can I pass the ID to my javaScript and open the specific div for the passed ID?
You can store this ID in a data-* attribute, like this:
// Here, I used a class for the buttons, since there are multiple ones
var btns = document.getElementsByClassName('myBtn'),
// These variables will hold the currently open modal and close button
modal, closeBtn;
// For each button
for(var i=0; i<btns.length; i++) {
// On click
btns[i].addEventListener('click', function(){
// Get the modal ID
var modalId = this.getAttribute('data-modal');
// Retrieve the corresponding modal
modal = document.getElementById(modalId);
// Retrieve the close button
closeBtn = modal.querySelector('.close');
// Show the modal
modal.style.display = "block";
}, false);
}
window.addEventListener('click', function(event) {
// If we clicked on the backdrop or the close button
if (event.target == modal || event.target == closeBtn) {
// Hide the modal
modal.style.display = "none";
}
}, false);
.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:80%}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}
<h2>Modal Example</h2>
<button class="myBtn" data-modal="myModalA">Open Modal A</button>
<div id="myModalA" class="modal"><div class="modal-content"><span class="close">×</span><p>This is myModalA</p></div></div>
<button class="myBtn" data-modal="myModalB">Open Modal B</button>
<div id="myModalB" class="modal"><div class="modal-content"><span class="close">×</span><p>This is myModalB</p></div></div>
<button class="myBtn" data-modal="myModalC">Open Modal C</button>
<div id="myModalC" class="modal"><div class="modal-content"><span class="close">×</span><p>This is myModalC</p></div></div>
<button class="myBtn" data-modal="myModalD">Open Modal D</button>
<div id="myModalD" class="modal"><div class="modal-content"><span class="close">×</span><p>This is myModalD</p></div></div>