revision:
The <dialog> tag defines a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
It makes it easy to create popup dialogs and modals on a web page.
The dialog tag allows a webpage to create popup or modal windows within the same browser window rather than doing so by launching a new browser window.
The purpose of the dialog element is to improve accessibility of mobile applications by making popups and modals part of the webpage DOM model.To display/hide the content, the Javascript API is needed.
Note: the dialog tag is not supported in Safari and Edge (prior version 79).
open : value: open;
specifies that the dialog element is active and that the user can interact with it.
The initial state of dialog is "hidden". The "dialog element" exposes the following API methods to control its conditions:
showModal(): open the dialog by setting the "attribute open" to the element. It also adds a "::backdrop" pseudo-element to cover the content outside of the element as an overlay effect.
show(): similar like showModal, but without adding a backdrop. This method is useful for using the dialog as a toast notification.
close(newReturnValue): close the dialog by removing the "open attribute", and updating the returnValue of the dialog element if there is any newReturnValue passed.
<dialog> . . . . </dialog>
This is some text.
This is some text.
This is some text.
This is some text.
code:
<div class="spec">
<p class="example">This is some text.</p>
<p class="example">This is some text.</p>
<dialog class="dialog1" open>This is an open dialog window</dialog>
<p class="example">This is some text.</p>
<p class="example">This is some text.</p>
</div>
<style>
.dialog1{position: relative; }
</style>
code:
<div class="spec">
<dialog id="two2">
<p>This is an HTML dialog! Click the button to close it.</p>
<button id="close">close dialog</button>
</dialog>
<button id="show">Show me the dialog!</button>
</div>
<script>
var dialog = document.querySelector('#two2');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
</script>
code:
<div class="spec">
<dialog id="three3">
<p>Here is some text for example.</p>
<button id="hidden">close dialog text</button>
</dialog>
<button id="showing">Show dialog text</button>
</div>
<style>
#showing, #three3{position: relative;}
</style>
<script>
(function() {
var dialog = document.getElementById('three3');
document.getElementById('showing').onclick = function() {
dialog.show();
};
document.getElementById('hidden').onclick = function() {
dialog.close();
};
})();
</script>
code:
<div>
<dialog id="my-dialog">
<div class="content">
<form method="dialog">
<p>Form inside a dialog</p>
<div>
<label for="name">Name: </label>
<input type="text" id="name" name="name" />
</div>
<menu>
<button id=btn1" type="submit">Submit</button>
<button id=btn2" type="button" onclick="closeDialog()">Cancel</button>
</menu>
</form>
</div>
</dialog>
<button class="open-btn" onclick="showDialog()">Open Dialog</button>
</div>
<script>
const dialog1 = document.getElementById("my-dialog");
function showDialog() {
dialog1.showModal();
}
function closeDialog() {
dialog1.close();
}
dialog1.addEventListener("click", function (event) {
if (event.target === dialog1) {
closeDialog();
}
});
</script>
code:
<div>
<dialog id="favDialog">
<form method="dialog1">
<div>
<label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select>
</div>
<div>
<button id="cancel" type="reset">Cancel</button>
<button id="submit" type="submit">Confirm</button>
</div>
</form>
</dialog>
<div>
<button id="updateDetails">Update details</button>
</div>
</div>
<style>
#updateDetails{margin-left: 2vw; position: relative;}
</style>
<script>
const updateButton = document.getElementById("updateDetails");
const confirmButton = document.getElementById("submit");
const cancelButton = document.getElementById("cancel");
const dialog_A = document.getElementById("favDialog");
const selectElement = document.getElementById("favAnimal");
// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
dialog_A.showModal();
});
dialog_A.addEventListener("close", (event) => {
log(`close_event: (dialog_A.returnValue: "${dialog_A.returnValue}")`);
});
dialog_A.addEventListener("cancel", (event) => {
log(`cancel_event: (dialog_A.returnValue: "${dialog_A.returnValue}")`);
dialog_A.returnValue = ""; //Reset value
});
dialog_A.addEventListener("toggle", (event) => {
log(`toggle_event: Dialog_A ${event.newState}`);
});
</script>
code:
<div class="thisDialog">
<button id="openDialog1">Open Dialog</button>
<dialog id="myDialog1">
<p id="message1">This is a native dialog box!</p>
<button id="closeDialog1">Close Dialog</button>
</dialog>
</div>
<style>
.thisDialog {padding: 20px; border: 2px solid #ccc; border-radius: 10px;}
#closeDialog1 { margin-top: 10px;}
</style>
<script>
const dialog2 = document.getElementById('myDialog1');
const openBtn = document.getElementById('openDialog1');
const closeBtn = document.getElementById('closeDialog1');
openBtn.addEventListener('click', () => {
dialog2.showModal(); // Use 'show()' if you want a non-modal dialog.
});
closeBtn.addEventListener('click', () => {
dialog2.close();
});
</script>
code:
<div>
<dialog id="example1" style="width:40%; background-color:black;
color: white; border:5px solid red; position: relative;">
<p><q>Great people, no matter their field, have similar habits.
Learn them and use them in your own quest for greatness.</q> - <cite>Paula Andress</cite></p>
<button id="close1">Close</button>
</dialog>
<button id="open1" style="margin-left: 2vw;">Show Quote</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog3 = document.getElementById('example1');
document.getElementById('open1').onclick = function() {
dialog3.show();
};
document.getElementById('close1').onclick = function() {
dialog3.close();
};
})();
</script>