Many useful and semantic tags have been added to the HTML5 version. What I want to introduce today is one of the new tags in the HTML5 version, the <dialog> tag. Next, let's take a look at the usage of this label!
Definition and Usage of the Dialog Tag
In HTML, the <dialog> tag is a new HTML5 tag that is used to define a dialog or window. Currently only Chrome and Safari6 support this tab, so it is not used much.
The main function of the <dialog> tag is semantics, indicating that the element is a dialog box. And its style may not be used, because people have high requirements on the style of dialog boxes and windows. The style effect of this tag alone cannot meet the requirements, and CSS and JavaScript must be used to achieve a better display effect.
Syntax Format of the Dialog Tag
<dialog open="open">Content<dialog>
The <dialog> tag has an open attribute that specifies that the element is valid and that the user can interact with it.
Examples of the Dialog Tag
Its usage is somewhat similar to the Modal component of the major component libraries now. The browser also provides native dom methods for this tag: showModal, close, which can directly control the display and hiding of the pop-up window.
<dialog id="dialog">
<input type="text">
<button id="close">ok</button>
<dialog>
<button id="openBtn">Open popup</button>
<script>
const dialog = document.getElementById('dialog')
const openBtn = document.getElementById('openBtn')
const closeBtn = document.getElementById('close')
openBtn.addEventListener('click', () => {
// open the popup
dialog.showModal()
})
closeBtn.addEventListener('click', () => {
// hide the popup
dialog.close()
})
</script>