QUESTION: How to make window.showModalDialog() work on cross browser? or at least how to do something similar? with arguments, return value and window.close()?
ANSWER: There is no simple way to do that.
ATTENTION: dialogArguments will be lost if the page inside the popup will do a postback. For a better solution see my new version - click here.
First of all window.showModalDialog() function is something which works only on Internet Explorer and in the best case this command will open a new small window on some browsers, however this window is far from a modal window.
If you still need to have the same functionality as window.showModalDialog(), to pass some parameters / arguments to the page inside the popup and then return some values back from that page in the parent page, and also have the ability to close the popup from the inside of the popup then this article is for you.
Here I have created a modal popup, using jQuery, which gives you the ability to pass arguments to the page inside the popup almost in the same way as you would pass it through showModalDialog().
This is basically a jQuery dialog which of which content is actually a iframe, the iframe will open the url that you want. The title of the popup will be the same as the title from the page.
I have created this like a jQuey plugin, here is the code.
To open the modal dialog: $.showModalDialog (options); OR $().showModalDialog(options);
I have created the first one to be easier to call and for programmer to understand that this will not change or use any collection of elements.
url - String: the url of the page to be opened inside the popup (Default: null;);
dialogArguments - Object: the arguments which you need to pass to the target page (Default: null);
height - Number: the height in pixels of the modal dialog (Default: 'auto';);
width - Number: the width in pixels of the modal dialog (Default: 'auto');
position - String, Array: Specifies where the dialog should be displayed (Default: 'center'). Possible values:
1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).
resizable - Boolean: indicates if user will be able to resize the modal dialog or not (Default: true);
scrolling - String: indicates if user will be able to scroll the content inside the modal dialog or not (Default: 'yes', Possible values: 'yes', no');
onClose - It is an event - this is the action that should be performed when the dialog will be closed (Default: null).
To get the value of the arguments from the target window - you just need to write in the same way as you would do for window.showModalDialog() - window.dialogArguments.
To set the returnValue - window.returnValue.
To close the dialog - window.close().
Below is an example of how to use this plugin.
Here is an example of a target page, which will be shown in the popup, it demonstrates how to work with the arguments, returnValue and window.close():
I hope this code will help a lot of people, because it is easy to used and because it will work on different browsers.
Any questions or suggestions? leave a comment.