javascript - HTML5 <Dialog> Only works on chrome? -
using dialog on website appears work on chrome, on other browsers , on iphone dialog open permanently , on place. there should using instead of <dialog>
?
<p><button id="launchstyledmodal">learn more</button></p> <dialog id="styledmodal"> insert dialog text here <button id="close">close</button> </dialog> <script src="js/dialog.js"></script>
javascript:
window.onload = function () { // buttons. var styledmodalbtn = document.getelementbyid('launchstyledmodal'); var close = document.getelementbyid('close'); // dialogs. var styledmodal = document.getelementbyid('styledmodal'); // setup event listeners styledmodalbtn.addeventlistener('click', function(e) { e.preventdefault(); styledmodal.showmodal(); }); close.addeventlistener('click', function(e) { this.parentnode.close(); }); };
html5 dialog works in following browsers:
- chrome 37+
- opera 29+
- android browser 40+
- chrome android 42+
for more info visit http://caniuse.com/#search=dialog
there polyfill available on github: https://github.com/googlechrome/dialog-polyfill
Comments
Post a Comment