HTML <dialog> tag

The <dialog> tag is used to create a dialog box more likely a popup window. This element is shown within the active windows.

Type: Block Element

Syntax of <dialog> tag

<dialog> Annoucement </dialog>

The <dialog> tag is new in HTML 5.

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<dialog>	37.0 or higher	No	No	No	24.0 or higher

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <dialog open> This is an open dialog. </dialog>
</body>
</html>

Run The code »

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<dialog>	Yes	Yes	Yes	Yes	Yes

Attributes of <dialog> tag

Attribute	Value	Define
open	open	It defines the dialog box should be visible.
close	close	It defines the dialog box should be hidden. Default value.

Note: Do not use the close attribute with the <dialog> tag. By default, all content within the <dialog> element is hidden.
<dialog> = <dialog close>

Usage of <dialog> tag

The <dialog> tag is mainly used to show annoucement, pop up message, alert, Login/signup form.

<dialog> Without open attribute, this sentence will not display.</dialog>

More reference

The <dialog> tag is used within an HTML element using JS language.

Using JavaScript

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="show"> Open dialog box </button>  
<dialog>  
  <p> Put the words what you want to show. </p>  
  <button id="hide"> Close dialog box </button>  
</dialog>  
<script>  
  var dialog = document.querySelector('dialog');  
  document.querySelector('#show').onclick = function() {  
    dialog.show();  
  };  
  document.querySelector('#hide').onclick = function() {  
    dialog.close();  
  };  
</script>

</body>
</html>

❮ Previous Next ❯