This demo was posted by Jamie Juviler
This demo was found on Hubspot
He also has more in depth articles on his personal hubspot page Jamie's Personal Page
The demo was created on April 22nd, 2024
Dialog elements are a great way to display dialog boxes on your page. There are different types of dialog boxes such as a modal ( deactivates all page content) or non-modal (keeps the pages content). Dialog boxes can be used to create a form, alert and more interactive types of elements.
Dialog boxes are simple elements that can improve your site without taking over the page and distracting the user.
Using three different Javascript methods .show, .showModal and .close you can manage your dialog box. .show triggers a non.modal dialog box that enables users ot interact with the pages elements with the dialog box still open. .showModal opens a modal dialog box that limits user interaction with the rest of the page. Lastly .close is used to close the dialog box.
After closing the dialog, the focus returns to the element that initially triggered it, such as the "Open Dialog" button. In situations involving dialogs containing various focusable elements like buttons or text fields, the focus should be directed to the element users are likely to interact with first.
By incorporating a backdrop to the dialog box it shifts the users focus more to the dialog box rather than the rest of the page.
There is simple Javascript code to allow the dialog box to open, close and show the elements.