Show Modal Dialog in Javascript
It seems that Javascript world is evolving faster and faster. There are new features, which improve the language, new standards, like ES6 … but also, there are some features that don’t exist anymore. This is the case of the window.showModalDialog function.
I work in an old project where the main web browser is Internet Explorer 8 (I know, I work in the prehistory!!! ) Now, the customer wants to migrate the whole project to new versions of browsers (mainly, Mozilla and Chrome)
As I said before, in new versions of browsers, the window.showModalDialog function has disappeared, and for that reason, I had to search other alternatives for it.
According with MDN, “window.showModalDialog creates and displays a modal dialog box containing a specified HTML document”. The Sintax is really easy:
As you can see, the function needs an URL (Obviously!!!) BUT, if you wish (is optional), it could also take some arguments (and options, but in this case, it doesn’t matter), which you can get in the new window (modal dialog box)
Let’s see an example:
Once you know how it works, let’s focus on the real issue (Remember that this feature is obsolete, and it has been removed in new versions of browsers, like Chrome or Firefox)
If you research on “window.showModalDialog in Firefox” or “window.showModalDialog in Chrome” (my project doesn’t support Safari. For that reason Safari doesn’t appear in my research ), you’ll find that “this method was removed in Chrome 43, and Firefox 56”
The first step to look for different alternatives is to know what you need. For instance, if you use this function in a lot of HTML or JS files you’ll need exactly the same function with the same name and the same arguments (you mustn’t look for all the calls and change them. you can became crazy!!!)
In this case, you need a polyfill. “A polyfill is code that implements a feature on web browsers that do not support the feature”. It’s sounds perfect, isn’t it? but… how can we do that? The answer is easy… however, the implementation is a little tricky.
The best way to do that is with the <Dialog> HTML5 element. The main problem with this element is, like always, the compatibility with web browsers. Nowadays, Chrome is the only browser that supports it. Microsoft Edge, has the element under consideration, while Firefox has released the element in new versions (from version 57) but to use the element, you have to enable “dom.dialog_element.enabled” in about:config.
To solve that issue, you can rewrite the function:
In this way, if you use Internet Explorer 8, Firefox or Chrome, you’ll execute the real function or the new implementation (The real matter with this alternative is Microsoft Edge. In my case, the customer thinks is not a big deal) E
If you thought this alternative is interesting, you’d have to check niutech implementation.
You can find more alternatives if you don’t care about the name and the parameters of your function. It is highly recommended to learn Javascript programming in 2021.
If you look for “Window Modal”, you’ll find that Bootstrap is the most famous framework to show a modal dialog box. The main problem is the compatibility with old web browsers (for instance, Internet Explorer 8), but it works if you use the version 1.9.1 of JQuery.
Instead of Bootstrap, you can also look for other libraries or other implementations. I didn’t find any good enough. There is some good implementation, like JQueryUI Dialog, but it doesn’t provide the same functionality than showModalDialog (You must take into account that you can use an iframe to navigate to an URL, and show a modal window, with Boostrap)
As you can see, there isn’t any good alternative to window.showModalDialog. This is because window.showModalDialog has one thing that we’ll never be able to imitate. it stops code execution until dialog is closed and dialog result is returned to the caller. For this reason, we’ll have to refactor our code to use callback functions (or maybe promises) instead.
