Dialog Example

Dialog Example.markdown

Dialog Example

This is an example of the native dialog functionality

http://thenewcode.com/957/Native-Modal-Windows-in-HTML5-Using-the-dialog-Element http://thenewcode.com/962/A-Modern-HTML5-Lightbox-in-12-Lines-of-JavaScript

A Pen by neutraltone on CodePen.

License.

index.html

<dialog id="dialog">
	<h3>Are you sure?</h3>
	<p>You’ve pressed a big red button. It might do… something.
	<div>
		<button id="okay">Okay, go ahead</button>
		<button id="cancel">Cancel</button>
	</div>
</dialog>

script.js

/**
 * Opening dialog
 */

var dialog = document.getElementById('dialog');
dialog.show();

document.getElementById("cancel").onclick = function() {
	dialog.close();
} 


/**
 * Check for dialog support
 */

var testdialog=document.createElement("dialog");
testdialog.setAttribute("open", "");
if (testdialog.open==true){
	// browser supports the dialog element
} else {
	// browser doesn’t support the element: load a polyfill
}

style.css

dialog {
	font-family: Avenir, sans-serif;
  width: 25%;
  text-align: center;
  border: 3px solid; 
}

dialog div { 
	display: flex;
  justify-content: space-between;
}

dialog::backdrop { 
  background: rgba(0,0,0,0.9);
}