dialog experiment

dialog modal popup experiment with multiple dialogs.

by Laurens Maneschijn

HTML

<button close_all_dialogs>close all dialogs</button>
<button open_all_dialogs>open all dialogs</button>
<button open_dialog1>open dialog 1</button>
<button open_dialog2>open dialog 2</button>
<button open_dialog1_dialog2>open dialog 1 then dialog 2</button>
<button open_dialog2_dialog1>open dialog 2 then dialog 1</button>

<dialog DISABLEDopen id="dialog1">
	<form method="dialog">
		Dialog 1
		<button value="v1a">1a</button>
		<button value="v1b">1b</button>
		<button>close</button>
		<hr>
		more content to make the 1st dialog bigger so it shows behind the 2nd.
	</form>
</dialog>

<dialog DISABLEDopen id="dialog2">
	<form method="dialog">
		Dialog 2
		<button value="v2a">2a</button>
		<button value="v2b">2b</button>
		<button>close</button>
	</form>
</dialog>

<dialog open id="dialog3">
	Dialog 3
	<button onclick="this.closest('dialog').close();">close</button>
</dialog>


<div>
	Several things to note (using chromium):<br>
	<ul>
		<li>A <code>&lt;dialog open&gt;</code> element is visible from pageload, but it does not prevent clicking anything outside the dialog, and the (darkened) backdrop is not visible.
		<li>A <code>&lt;dialog open&gt;</code> element position on pageload is different from when opened using <code>dialog.showModal()</code>.
		<li>Having 2 dialogs open at the same time is possible. it seems the last opened or the "last in DOM" element is the one on top.
		<li>Calling <code>dialog.showModal()</code> on an already open dialog throws an error:<br>
		    <code>Failed to execute 'showModal' on 'HTMLDialogElement': The element already has an 'open' attribute, and therefore cannot be opened modally.</code>
		<li>Clicking a <code>&lt;button&gt;</code> element without explicit <code>value</code> attribute set, does not set the <code>dialog.returnValue</code> property.
		<li>The backdrop style can be targeted using css <code>dialog::backdrop { ... }</code>.
		<li>Hitting <code>ESC</code> key will close the last opened or "last in DOM" dialog, throwing a...

CSS

/* DEFAULT copy paste from chrome inspector:
dialog::backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.1);
}
*/
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

code, .code {
	display: inline-block;
	margin: 1px;
	padding: 1px;
	white-space: pre;
	background: #8883;
	outline: 1px dashed #8888;
}

/* ********** misc ********** */

ul, ol, li { margin-top: 0; margin-bottom: 0; }

/*
🔗 \01f517 &#128279;
⧉ \0029c9 &#10697; &boxbox;
🆕 \01f195 &#127381;
*/

a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	outline: 1px dotted #888;
}

JavaScript

console && console.clear ? console.clear() : 0;

document.querySelectorAll('[open_all_dialogs]').forEach(function(el){
	el.addEventListener('click', function(e) {
		// NB: can throw error: "Failed to execute 'showModal' on 'HTMLDialogElement': The element already has an 'open' attribute, and therefore cannot be opened modally."
//		document.querySelectorAll('dialog').forEach(function(el){
		document.querySelectorAll('dialog:not([open])').forEach(function(el){
			el.showModal();
		});
	});
});

document.querySelectorAll('[open_dialog1]').forEach(function(el){
	el.addEventListener('click', function(e) {
		document.querySelector('#dialog1:not([open])').showModal();
	});
});
document.querySelectorAll('[open_dialog2]').forEach(function(el){
	el.addEventListener('click', function(e) {
		document.querySelector('#dialog2:not([open])').showModal();
	});
});
document.querySelectorAll('[open_dialog1_dialog2]').forEach(function(el){
	el.addEventListener('click', function(e) {
		document.querySelector('#dialog1:not([open])').showModal();
		document.querySelector('#dialog2:not([open])').showModal();
	});
});
document.querySelectorAll('[open_dialog2_dialog1]').forEach(function(el){
	el.addEventListener('click', function(e) {
		document.querySelector('#dialog2:not([open])').showModal();
		document.querySelector('#dialog1:not([open])').showModal();
	});
});




document.querySelectorAll('[close_all_dialogs]').forEach(function(el){
	el.addEventListener('click', function(e) {
		document.querySelectorAll('dialog').forEach(function(el){
//		document.querySelectorAll('dialog[open]').forEach(function(el){
			el.close();
		});
	});
});

document.querySelectorAll('dialog').forEach(function(el){
	el.addEventListener('close', function onClose(e) {
		console.log({
			'type':e.type,
			e,
			this:this,
			'returnValue':this.returnValue
		});
	});
	el.addEventListener('cancel', function onClose(e)...