Qarpeo LogoInstitute

Dialog

The <dialog> element generates a modal window on a webpage, allowing the display of additional content. It can be opened or closed through JavaScript.

HTML Dialog

HTML offers the <dialog> element for creating both modal and non-modal dialogs. Here's a quick guide on using the <dialog> element in HTML:

The <dialog> Element

The <dialog> element is a container for dialog content, including the title, body, and controls.

Syntax

index.html
<dialog open>Contents...</dialog>

Example

This is a simple dialog box.

index.html
<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Attribute

HTML open Attribute

The open attribute was used to indicate that the dialog element was active and could be interacted with. However, this tag is no longer supported in HTML.

Basic Usage of the <dialog> Tag

This is a simple dialog box.

index.html
<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>
  • In this example, the <dialog> tag is used to show a dialog box with the text “Welcome to Website”. The open attribute makes the dialog box appear automatically.

Using the <dialog> Tag with Image and Button

Rose Image
index.html
<dialog open>
  <img src="img.jpg" alt="Rose Image" />
  <button id="closeImagePreview">Close</button>
</dialog>
  • In this example, the <dialog> tag is used to display an image with a “Close” button.
The open attribute makes the dialog box appear automatically, showing the image and button inside.

Conclusion

The <dialog> element in HTML is used to create interactive dialog boxes, which can be either modal or non-modal. It is often used for displaying pop-up windows, notifications, or confirmation prompts. To display a dialog, the open attribute is used, which makes the dialog visible when the page loads.

Popover

An HTML popover is a small window that appears upon clicking or hovering over an element, offering additional information or actions, often created with JavaScript or CSS.

Graphics

HTML graphics are created using elements like (<canvas>) for drawing 2D shapes or animations, and (<svg>) for scalable vector-based images.