Solution to the Problem of Chrome Not Supporting showModalDialog Modal Dialog and Unable to Return returnValue

What?The modal dialog is not working?

Last week, I modified and tested a background management project. When testing compatibility with various browsers, I found that the showModalDialog method in the Chrome browser does not display a modal dialog, just like opening a new page, the parent window can still freely obtain focus, and can open multiple windows, and the return value returnValue cannot be returned, always undefined. So many problems are very headache. The following tests were carried out on various mainstream latest versions of browsers.

Browser	Whether supported	Status
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	It is not a modal dialog, but a new window is opened
Opera12.0	×	Nothing happens, not even a window pops up

What does Chrome open

Since the window opened is not a modal dialog, but just like opening a new window, it is just to verify whether the sub-window window.opener is empty to understand.

<script type="text/javascript">
    alert(window.opener);
</script>

In Chrome, it displays an [object window] object, while in IE it is undefined. Now we know that Chrome treats showModalDialog as window.open. That is to say, we can use window.opener to operate the sub-window under the Chrome browser. I also found an interesting phenomenon, in Firefox, testing window.opener also does not return null, so I tested the situation of window.opener and window.dialogArguments in sub-windows using showModalDialog in various browsers. Since Opera browser does not pop up any windows, it was excluded from the following tests.

Explain the showModalDialog method of the parent window, where the arguments passed are the window object, and the following are the test results:

Browser	Modal dialog	window.opener	window.dialogArguments	returnValue
IE9	○	undefined	[object Window]	○
Firefox13.0	○	[object Window]	[object Window]	○
safari5.1	○	[object Window]	[object Window]	○
chrome19.0	×	[object Window]	undefined	×

The above is the result of my test, and the degree of support by various browsers is still different. I also want to mention that under Firefox browser, if the child window is refreshed, window.dialogArguments will also be lost and become undefined. From the above results, we can see that the return value returnValue is only undefined in the chrome browser, and there is no problem with other browsers. So how do we solve this problem?

Solving the returnValue problem

Through the various tests above, we have learned that the showModalDialog method of chrome is very similar to executing the window.open method, so we can use window.opener to achieve the function of window.returnValue.

Note: The random parameter temp = Math.random() is used to solve the caching problem. Many friends have tested that undefined is due to caching issues. It is appended to2012-10-17

Parent window part of js code:

window.onload = function () {
  var returnValue = window.showModalDialog("son.html?temp=" + Math.random(), window);
  //for chrome
  if (returnValue == undefined) {
    returnValue = window.returnValue;
  }
  alert(returnValue);
}

Child window part of js code:

if (window.opener != undefined) {
    //for chrome
    window.opener.returnValue = "opener returnValue";
}
else {
    window.returnValue = "window returnValue";
}
window.close();

This also works on IE, FireFox, Chrome, Safari, and other browsers.

Finally

Finally, someone may ask how to implement a modal dialog? I think it should be possible to achieve this with some JavaScript techniques, but I do not recommend doing so. I have also searched for a lot of information and cannot solve this problem very well. Of course, there can also be other ideas, such as not popping up more windows by setting the open button to be unavailable when clicking to open the window, and setting it to be available again only after closing the child window. Everyone can try these on their own, and perhaps there are better methods.

Last but not least, it is very popular in current web design to simulate a form within the page using div, with custom styles and good interaction. It is not necessary to use modal windows. How to simulate them on the Internet? Today's writing is here. Please point out any mistakes as much as possible ~~~

Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. The website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w.3Please report any violations by email to codebox.com (replace # with @) and provide relevant evidence. Once verified, the website will immediately delete the infringing content.