13

Posted here is an answer that instructs those who miss the old window.showModalDialog JavaScript function to use the 

<dialog>

element instead. I have used this along with the polyfill needed for IE and FF and it works. However, there is a noticeable lag introduced when using the polyfill that I would like to avoid for Chrome (not to mention there is a warning not to use the polyfill when browsers support it). How do I detect whether or not the dialog element is supported so I can leave out the polyfill processing? Specifically these lines:

var dialog = document.getElementById('<element id>');
dialogPolyfill.registerDialog(dialog);
Community
  • 1
  • 1
Ian
  • 4,169
  • 3
  • 37
  • 62

3 Answers3

19

You could write a simple test like this:

if (typeof HTMLDialogElement === 'function') {
  /** yep */
} else {
  /** nope */
}
colecmc
  • 3,133
  • 2
  • 20
  • 33
  • 1
    Just tested, works in IE, FF, and Chrome as it is written. I'm hoping it'll keep working when the other browsers start updating. – Ian Aug 06 '15 at 02:05
1

Try console.log(typeof window.showModalDialog === 'undefined')

if (typeof window.showModalDialog === 'undefined') {
  console.log('No. ');
} else {
  console.log('Yes! ');
}
iplus26
  • 2,518
  • 15
  • 26
  • 1
    Technically this would only check for the absence of showModalDialog. It is conceivable that future browsers may add support for the dialog element, but retain the use of showModalDialog (MS would do this for sure). – Ian Aug 06 '15 at 01:55
  • I tested in Chrome, Firefox, and IE. It gave the correct response for each. 1up – dlporter98 Aug 06 '15 at 01:57
0
function dialogElementSupported() {
  return typeof document.createElement('dialog').show === 'function';
}
Md. Saidur Rahman Milon
  • 2,761
  • 23
  • 29
Alec Rust
  • 10,532
  • 12
  • 48
  • 63