Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

dialog

The <dialog> element renders a dialog box that is centered in the window. It is used to allow the user to perform a task or complete some operation. Style it using CSS to make it look attractive and size it. Note: This element has limited browser support. Test in Google chrome. It may be in jeopardy of being removed from the HTML specification.

Code Example

<!doctype html> <html> <head> <style> #dialog1{ width:350px; height:200px; background:#FFECC6; border:#960 1px solid; border-radius: 3px; } </style> <script> function toggleDialog(){ var dialog = document.getElementById('dialog1'); if(dialog.open){ dialog.open = false; } else { dialog.open = true; } } </script> </head> <body> <dialog id="dialog1"> Here is my dialog window </dialog> <h1>My web page full of normal content ... ... ... ... ... ...</h1> <h1>My web page full of normal content ... ... ... ... ... ...</h1> <h1>My web page full of normal content ... ... ... ... ... ...</h1> <button onclick="toggleDialog()">Toggle Dialog Window</button> </body> </html>

Attributes

globals - the global attributes common to all elements possible values: see global attribute list open - specify that the window show by default possible values: "open"

HTML

Elements

aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr