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.
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.
<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> |
/** | |
* 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 | |
} |
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); | |
} |