Display a popup or modal window without the overheads
A common design pattern on the web is to have an extra window display to provide more information or options for a complicated interaction. Adding a confirmation as an extra step is also a good way to make a user aware their action will have consequences. These windows have been around for years through the help of libraries such as Bootstrap or jquery UI. While they can be easy to implement, they often require heavy scripting and extra styling to match the look and feel of the site they are implemented into. One of the few elements added in HTML5.2 is <dialog>. This new, semantic element is designed to denote a supplementary, interactive component that displays out of the main flow of the document.
<p>dialog Content</p> </dialog>
The <dialog> element itself is designed to be as simple to use as possible. Any content within the tags will become part of the window and do not appear on the page by default. When the element has the ‘open’ attribute applied, it then appears centred based on where it appears in the DOM. While dialog boxes can request a response, a user can still navigate the page without having to interact with it. A modal window is similar to a dialog, but has the aim of requiring an action from the user before proceeding. This makes it useful for potentially destructive actions, such as deleting an account.
const dialog = document. getelementbyid(“modal”); dialog.showmodal();
Forms inside a dialog can submit with a ‘form’ method. The ‘returnvalue’ of the modal is the value of the button used to submit