09 March 2011

window.showModalDialog() - Cross Browser, new version

Hello,

This is a continuation, or a new version for my last post about window.showModalDialog().

The new version was implemented as a jQuery function to which you can pass options which you like.
This version was made because:
    1) The impossibility of previous version to retain dialogArguments during postback;
    2) The impossibility of previous version to close the dialog when the target page is inside several iframe tags;
    3) The impossibility of previous version to retain window.returnValue during postback;
    4) It will be possible now to fire a postback of the page or to fire a postback of a element (with targetElementId) right after the dialog was closed and the callback function finished to execute;
    5) Theoretically this popup library can be used to open another popup inside an existing one (Note: I haven't tried this yet).

However, previous version of my showModalDialog can satisfy someone's requirements and it will be no need to complicate his life with the new version.


I say "complicate his life" because new version requires the inclusion of some javascript code on the target Page that is going to be shown in the popup. But this should not be a problem for those who have base class for every page, see below more details.

Here is the showModalDialog jQuery function code:

Code:
var $dialog = null;

jQuery.showModalDialog = function(options) {

    var defaultOptns = {
        url: null,
        dialogArguments: null,
        height: 'auto',
        width: 'auto',
        position: 'center',
        resizable: true,
        scrollable: true,
        onClose: function() { },
        returnValue: null,
        doPostBackAfterCloseCallback: false,
        postBackElementId: null
    };

    var fns = {
        close: function() {
            opts.returnValue = $dialog.returnValue;
            $dialog = null;
            opts.onClose();
            if (opts.doPostBackAfterCloseCallback) {
                postBackForm(opts.postBackElementId);
            }
        },
        adjustWidth: function() { $frame.css("width", "100%"); }
    };

    // build main options before element iteration

    var opts = $.extend({}, defaultOptns, options);

    var $frame = $('<iframe id="iframeDialog" />');

    if (opts.scrollable)
        $frame.css('overflow', 'auto');

    $frame.css({
        'padding': 0,
        'margin': 0,
        'padding-bottom': 10
    });

    var $dialogWindow = $frame.dialog({
        autoOpen: true,
        modal: true,
        width: opts.width,
        height: opts.height,
        resizable: opts.resizable,
        position: opts.position,
        overlay: {
            opacity: 0.5,
            background: "black"
        },
        close: fns.close,
        resizeStop: fns.adjustWidth
    });

    $frame.attr('src', opts.url);
    fns.adjustWidth();

    $frame.load(function() {
        if ($dialogWindow) {

            var maxTitleLength = 50;
            var title = $(this).contents().find("title").html();

            if (title.length > maxTitleLength) {
                title = title.substring(0, maxTitleLength) + '...';
            }
            $dialogWindow.dialog('option', 'title', title);
        }
    });

    $dialog = new Object();
    $dialog.dialogArguments = opts.dialogArguments;
    $dialog.dialogWindow = $dialogWindow;
    $dialog.returnValue = null;
}

function postBackForm(targetElementId) {
    var theform;
    theform = document.forms[0];
    theform.__EVENTTARGET.value = targetElementId;
    theform.__EVENTARGUMENT.value = "";
    theform.submit();
}


Bowser Support





Some Code Explained

The use of this function is very simple, you just need to call $.showModalDialog(options) where options are:
      - url: Default - null,
      - dialogArguments: Default - null,
      - height: Default - 'auto',
      - width: Default - 'auto',
      - position: Default - 'center',
      - resizable: Default - true,
      - scrollable: Default - true,
      - onClose: Default - function() { },
      - doPostBackAfterCloseCallback: Boolean. If true then after firing onClose event the base form will make a postback. Default - false,
      - postBackElementId: String. This have sense only when doPostBackAfterCloseCallback is set to true, and if has value then it will be as the set as the eventTarget for this postback, otherwise null. Default - null

Note: These options have the same meaning as in previous version, excepting the new options, which are: doPostBackAfterCloseCallback 


In order to get the return value you will call this.returnValue from within the onClose callback function.

The code to include in the Target page (in the popup)

Below code you will have to include in all popups pages, you could make it as a separate Javascript library and just include it in the potential popup page. It will not do anything inside the page which will not be used as a popup.

Another option, about I was writing earlier in this post is to create a base class for page object (in C# or other programming language which gives this possibility) from which to inherit all your pages. In this base class you will have to override the page Render event to include this script or include the reference to the Javascript file, depends on your choice. By overriding the Render page you could also include jQuery in each page from your site, but this is another subject.

Here is the code that you need to include on every page / or potential popup page if we can say so.

Code:
var prntWindow = getParentWindowWithDialog(); //$(top)[0];

var $dlg = prntWindow && prntWindow.$dialog;

function getParentWindowWithDialog() {
    var p = window.parent;
    var previousParent = p;
    while (p != null) {
        if ($(p.document).find('#iframeDialog').length) return p;

        p = p.parent;

        if (previousParent == p) return null;

        // save previous parent

        previousParent = p;
    }
    return null;
}

function setWindowReturnValue(value) {
    if ($dlg) $dlg.returnValue = value;
    window.returnValue = value; // in case popup is called using showModalDialog

}

function getWindowReturnValue() {
    // in case popup is called using showModalDialog

    if (!$dlg && window.returnValue != null)
        return window.returnValue;

    return $dlg && $dlg.returnValue;
}

if ($dlg) window.dialogArguments = $dlg.dialogArguments;
if ($dlg) window.close = function() { if ($dlg) $dlg.dialogWindow.dialog('close'); };

Any question let me know.

Did it help you? :)

UPDATE March 12: I have figured out that window.showModalDialog is now working on FF 3 and up, and also in Safari 3.1 and up. But it is still  not working on Chrome.

UPDATE March 29: Here is an example of how to use this function.
Code:
var url = 'test.html';

$.showModalDialog({
     url: url,
     height: 500,
     width: 900,
     scrollable: false,
     onClose: function(){ var returnedValue = this.returnValue; }
});

UPDATE August 2012: Looks like there is a problem when setting DocType: HTML 4.01 Doctype on top of extremedevStart.html. --> The popup does not close.
To fix this use:

$dlg.dialogWindow.dialog('close');


instead of:
window.close(); 


Many thanks to Yang for this.

You can find a sample code here.
Please share this article with others!

129 comments:

Anonymous said...

Hi , Could you provide any example using above, code, i am unable to make it work.

Roman Gherman said...

Hi,

Yes, sorry I should have done this in article, will update it soon. Here is an example of how to use:
------------------------
var url = 'test.html';

$.showModalDialog({
url: url,
height: 500,
width: 900,
scrollable: false,
onClose: function(){ var returnedValue = this.returnValue; }
});

Anonymous said...

Hello Roman.

First of all, congrats on your work.

I was wondering if it was possible to call showModalDialog from
inside an iframe so that it doesn't load up inside the iframe (ie, a
link is clicked in the iframe and it pops up on the parent page). Any
suggestions that you might have to get showModalDialog to work in such a
way would be great.

Thanks.

Roman Gherman said...

Hi Pedro,

Yes it is possible, you can access any element on the parent page from within the iframe.

You can use:
window.parent from within the iframe to access the parent page.
If you need more details let me know. I can help you to solve your problem - if you send me a part/all the source code of the page or a sample explaining what you need.

If you want I can give you my email.

Thanks for commenting on my post and appreciating my work :)

Kashmir Singh said...

Hi,

Thanks for this post. It is really very helpfull. But I am unable implement it. Could you please email any sample at rd.kashmir@gmail.com.

Thanks
Kashmir

Roman Gherman said...

Hi Kashmir,

Thanks for visiting my blog, I have added a code sample, check the link at the end of the post.
I will also email you a copy.

Regards,
Roman

Kashmir Singh said...

Hi Roman,

Thank you very much for your reply and sample. Using the code, I am facing a problem in my Silverlight that Dialog's Page Title and Close Button is coming up. Do you have any Idea about this?

Thanks
Kashmir Singh.

Roman Gherman said...

Kashmir,
What do you mean by coming up?
Is there a possibility for me to see an online version of the site? or an example with the problem? this way I would be able to help you faster.

Regards,
Roman

Unknown said...

Tried your sample code on several browsers.

Unfortunately, it doesn't work with Google Chrome (11.0.696.60), the very one that requires an alternative to showDialogBox().

- The 'Close Popup' doesn't close anything.
- The data is not passed from popup to parent.

Roman Gherman said...

Hi Laurent,

First of all thanks for visiting my blog.

And now about the problem that you have with my $.showModalDialog().

I guess you get an error like this: "Unsafe JavaScript attempt to access frame with URL file:///C:/..../extremedevTestPopup.html. Domains, protocols and ports must match."

This error occurs because of Google Chrome's high security, it does not allow to modify the content of the frame across different domains, and in this case (when opening the page as files in browser) for some reason Chrome consider that as different domains.

The code actually works if you will post it on a site on internet, and it will not give any errors. Another thing that you could do to test locally you need to include those two files from the sample into a Web Site / Web Project application in Visual Studio and use it's virtual server to visualize the sample.

I have added to the sample a SLN file so that you will be able to test.

Thanks again for visiting my blog, subscribe to get more interesting solutions and ideas.

Regards,
Roman

Shafaqat Ali said...

Hi
thanx for the code and article.
i am testing this piece of code on IE 9 and it shows javascript error message on parent form load "HTML parsing error:Unable to modify the parent container elemt before the child element is closed (KB927917)

Roman Gherman said...

Hi Shafaqat Ali,

You are probably trying to open a page which is not from your domain. If you can then send me some more details on rgherman.blog@gmail.com and I will try to find the solution for your problem. Send me some piece of code from where I could understand the problem.

Regards,
Roman

shivangi said...

hi
Is this is faster than actually using window.showmodaldialogue.I mean your jquery plugin creates the popup window fatster than window.showmodaldialogue

Shafaqat Ali said...

I have figured out that, very nice solution and working well on different browsers.

Roman Gherman said...

Hi Shafaqat Ali,
I have never compared if it is faster than window.showmodaldialog. I have concentrated on creating a cross-browser alternative for that that would work on all major browsers.

Regards,
Roman

chapelhill said...

This code does not work for me in IE9. On the line starting with "var $dialogWindow = $frame.dialog" I get:

"Object doesn't support property or method 'dialog' "

Roman Gherman said...

Hi chapelhill,

This is most probable that you have not added jQuery UI javascript library to the page.

Check that.

Regards,
Roman

Bharath said...

Hi,

I would appreciate your effort in building the cross browser enabled showModalDialog. I have one more requirement like to hide and show the modal dialog. Is there any posibility?

Roman Gherman said...

Hi Bharath,

Sorry what do you mean? of course there is a possibility to show/hide the modal dialog. From article information everything should be clear:
to show: $.showModalDialog
to hide: window.close() from inside the dialog

Regards,
Roman

feDERico said...

Hi, great article. I have only one question about height and width. I need open popup with percent, not with px, because the different resolutions.

I try with:

pHeight = pHeight + '%'; (95%)
pWidth = pWidth + '%'; (70%)

but only work width, height not work, show 0px height.

Is possible to use percent?

Thanks

Roman Gherman said...

Hi feDERico,

It is hard to me to understand where you put that stated code but anyway, jQuery dialog does not support to set the height in percents, therefore my dialog also doesn't support that.

See this article for more information: http://forum.jquery.com/topic/dialog-size-as-percent

Regards,
Roman

feDERico said...

Roman, i get to work with this:

function OpenNewPopup(pUrl, pHeight, pWidth) {

paginaDesde = pUrl;

var pH = $(window).height();
pH = pH * (pHeight / 100);

var pW = $(window).width();
pW = pW * (pWidth / 100);

$.showModalDialog({
url: pUrl,
dialogArguments: '',
height: pH,
width: pW,
...

and it works, but now i have another problem, with postback

when before close popup, i put the selected value in a session variable, so, when close, run postback in father and read the EVENTARGUMENT to decide where it came the info (multiples popups in one page), but, when i run the popup the event argument came "", so i put the paginaDesde (pageFrom) at the top and where do postback, fill the value eventargument with that.

I guess is not the right solution, but it works.

You have the correct solution to that?

Thanks in advance

Roman Gherman said...

feDERico,

Why don't you use:

setWindowReturnValue(someValue); // to set the returning value of the popup


AND

onClose: function(){ var returnedValue = this.returnValue; } // to GET the returned value from the parent window


Regards,
Roman

feDERico said...

Well.... dont know why dont use that :):):)

I try and tell you what happend.. By the way, is possible to know if the window close with the X on right corner or close from some button for example?

Why this? Because with autopostback, wherever close the window execute a postback, but when close from the x, no value came from the popup...

Objective, postback if came from a button, no postback if came from the X

Is possible?

Thanks for your patience

Roman Gherman said...

feDERico,

You can do it so:
When a button on the form is pressed (that closes the popup) set the return value to true:
setWindowReturnValue(true);

and on the onClose - check if the returnValue is true then do a postback otherwise don't do anything.

feDERico said...

Roman, thanks for your patience

i dont understand the time line of execution...

when button is pressed, i put this code:

ScriptManager.RegisterStartupScript(pPage, typeof(string), "CLOSEFORM", "closeMe('" + url + "');", true);

like i say, url is to determinate on father, where are popup came, to execute some code in father from eventargument string

i try what you say to set true to setWindowReturnValue and (here is my full confussion) where in your code evaluate that condition...

you put the onclose code before the popup open?

i must use de closeMe function or onClose: function() inside $.showModalDialog({

i guess the problem is understand the timeline on how the code is execute

can you (if you can) give me a example of code to evaluate the postback is came from button or the X of window?

Many thanks.

Roman Gherman said...

feDERico,

setWindowReturnValue - needs to be called before calling window.close() in the popup.

You then can use the value that you have set with setWindowReturnValue in the parent window.


Everything is working asynchronous this is why when you close the dialog a callback function is actiond: and that function is defined using the attribute onClose.

To get the value set with setWindowReturnValue you just need to do right as in my example:
onClose: function(){ var returnedValue = this.returnValue; }

Regards,
Roman

feDERico said...

Roman, tx for your help, now is running excelent...!!!

Roman Gherman said...

You're welcome.

Sergio said...

Hi Roman,
thank you for your program, one question, I have a page with frames, can I modal the complete page? because when I tried, only modal the parent frame, but not the others.

tks for your time
Sergio

Roman Gherman said...

Hi Sergio,

Yes, you will just have to give the url of that page to the function (As per "UPDATE March 29"). Or I don't understand what you mean?

Thanks for visiting my blog.

Regards,
Roman

Anonymous said...

Roman

I have a very simple question. I'm using IE9 and I want to be able to close the popup from a button inside it that says "Close".

window.close() does not seem to work and $(this).dialog('close') is also not working.

Regards,
Miguel

Anonymous said...

Some more info about my last post, for some reason "$dlg.dialogWindow.dialog('close');" does work. I don't know why the window.close function is not redefined correctly because I tried your example and there it does work.

Roman Gherman said...

Hi Miguel,

Well, without seeing the code I am not sure I can help much, but maybe you have an error somewhere there in the popup window?
Or maybe you are overriding the window.close somewhere?

Regards,
Roman

mittal said...

Hi Roman,
Thanks for the nice plugin.
Can you please post some code to regarding the returnValue.
I am always getting this as null.
I have called the setWindowReturnValue before the window.close().
Thanks

Anonymous said...

Mittal, try to put doPostBackAfterCloseCallback at true.

Roman Gherman said...

Hi Mittal,

There already is a sample at the end of the post. Here is the link again:
https://docs.google.com/uc?id=0B7GDmKvYNr_4YTYwODJkZDYtNGVkYS00ZTNlLWI2NWEtYzE4ODBlZGU1NzE3&export=download&authkey=CMDIweML&hl=en

Anonymous: the doPostBackAfterCloseCallback should not have anything to do with the Mittal's problem.

Regards,
Roman

Quique said...

Hi Roman

We have an problem

function test()
{
var url = 'extremedevTestPopup.html';
$.showModalDialog({
url: url,
dialogArguments: 'www.extremedev.blogspot.com',
height: 500,
width: 900,
scrollable: false,
onClose: function(){ var returnedValue = this.returnValue; alert('This is the returned value from the popup:' + returnedValue); }
});
return(returnedValue);
}

This sample not work, the alert work fine, but test function don't return returnedValue data.
How can we do to it?

Roman Gherman said...

Hi Quique,

You need to understand that $.showModalDialog is executed and the browser doesn't wait for it to close, but it runs further and executes return(returnedValue);

However the popup is still opened.

This is why you will have to make all what you need in the
onClose: function(){ var returnedValue = this.returnValue; alert('This is the returned value from the popup:' + returnedValue); }

as that is fired when the popup is closed.

If you still have any questions - let me know.
Regards,
Roman

Anonymous said...

Hey Roman,

I am having a problem using $.showModalDialog on IE9. The dialog page which appears over the parent is mis-aligned. Also, if I call a dialog from another dialog, it's so mis-aligned that all I get is an empty window. (The dialog is there, it's just not visible in the frame?) Please help as I am out of ideas. By the way, it all works perfectly in Chrome.

Thanks.

Joe

Anonymous said...

OK, I got the dialog aligned properly, but I still have a problem with the frame on the parent page (with IE9 only). How can I get the frame to take up 100% of the available browser window? It looks like in IE9 it's not doing that. Thanks again.

Joe

Roman Gherman said...

Hi Joe,

I am glad that you managed to find the fix for the dialog alignment.
What about the 100% of the available browser window, I am not sure I understand what you want to do but maybe this article will help you: http://extremedev.blogspot.com/2011/03/height-100-does-not-work.html

Regards,
Roman

Anonymous said...

hi Roman ,

first,thank you Roman for this good and nice job.
please can you help me to use your solution , i have a problem to call your plugin because i want to call the fuction when i click on the buton to open my popup.

Roman Gherman said...

Hello Ahmed,

There is a link to a sample at the end of the article, here is the link. https://docs.google.com/uc?id=0B7GDmKvYNr_4YTYwODJkZDYtNGVkYS00ZTNlLWI2NWEtYzE4ODBlZGU1NzE3&export=download&authkey=CMDIweML&hl=en

On click you need to do something like this:

var url = 'test.html';

$.showModalDialog({
url: url,
height: 500,
width: 900,
scrollable: false,
onClose: function(){ var returnedValue = this.returnValue; }
});

Thanks for visiting.
Note to all my visitors: - Please recommend this article to others: Facebook, Twitter, Digg, ... and other social websites. Many People are searching for this solution. So lets help each other.

Regards,
Roman

Anonymous said...

Hi Roman ,

Thanks for the nice example.i'll retur to you if i have any other problem.

Regards,
Ahmed.

Luis Escudero said...

hi roman:

first thank's man, this function it´s great, but I have a little problem, the function was working just perfect, but suddendly no more, the windows don't close an others just show and hide instantly, does IE9 need a plugin or something?

thanks

Luis E.

Roman Gherman said...

Hi Luis,
It should work in IE 9 with no problems.
But to be sure, you can try my sample and see if it works for you.
Most probable is that you have an error somewhere in Javascript code.

Anonymous said...

I see it's been mentioned above that it does not work on Chrome? Is that still true?

Roman Gherman said...

yes the standard window.showModalDialog does not work as expected on Chrome. It only displays a window, but it is not a modal dialog, it is a separate window.

Patrali said...
This comment has been removed by the author.
Patrali said...

This post is very helpful. However , I am trying to post some form value and trying to use those values in the child window. not understanding how to make it work.Can anyone help me? found :
dialogArguments: null

not understanding how to use it.Can I get an example?

Thank you.

Roman Gherman said...

Hi Patrali,

There is a sample code - see at the end of the post.

https://docs.google.com/uc?id=0B7GDmKvYNr_4YTYwODJkZDYtNGVkYS00ZTNlLWI2NWEtYzE4ODBlZGU1NzE3&export=download&authkey=CMDIweML&hl=en

Patrali said...

Thank you for your response.It resolved my issue. Another question . But I do not need the scrollbar . I set all scrollbar options to "false" but still the scrollbar showing up on the dialog. How can I remove it totally?

Iwo said...

Hi Roman,
this works fine with html pages but when i make an example with the aspx pages, in Internet Explorer 9 does not closes the popUp window. In Firefox works ok. Can I send you my example to see it?

Ivica

Roman Gherman said...

Hello Ivica,

Yes, you can send be the example:
My email: rgherman.blog@gmail.com

Regards,
Roman

John Tomaselli said...

Hi Roman,
1) I have in working in chrome 17.9....
2) I have it working in FF 11.0
3) IE.9 does not close the dialog
4) How can I pass a query string needed for code behind to url i.e.
var callbackParameter = "91","92";
var url = 'WebForm1.aspx?ProjectCode= " + callbackParameter';
$.showModalDialog({
url: url,...
5) How I get the dialogArguments displayed on a control like I could with the regular showModalDialog
oArgs.innerHTML = $dlg.dialogArguments;

lt span style="color: #660066; text-decoration: underline; font-weight: bold;" id="oArgs" gt
Thanks for your great work as I found the original showModalDialog somewhat useless.
John
jrt@gtz.com

John Tomaselli said...

Hi,
I figured out problem with query string. In normal use I populate callbackparamter from checkbox's on a treeview.
John


var callbackParameter = "91,92";
var url = 'WebForm1.aspx?ProjectCode=' + callbackParameter + '';

Roman Gherman said...

Hi John,

3) I have tried on several computers and the dialog should close fine.
5)first you need to pass the dialogArguments to the popup like this:
$.showModalDialog({
url: url,
dialogArguments: 'some value',
height: 500,
width: 900,
scrollable: false,
onClose: function () { var returnedValue = this.returnValue; alert('This is the returned value from the popup:' + returnedValue); }
});


on the POPUP window in order to get the dialogArguments passed you can use:
window.dialogArguments

Did you try the sample project attached to the article?

Regards,
Roman

Patrali said...

Hi Roman , The modal dialog is working great with http ( I tested with IE-8 and firefox). But the window is not closing if I use IE-8 with https (firefox is fine though.) .Can you help?

Patrali said...

Ok here is an observation : with the https+IE when loading up parent dialog ( from where the showMoal is being called) it pops up a message"do you want to view only the webpage content that was delivered securely" - if we select "no" the modal dialog is working fine . If we select "yes" modal dialog is not closing with windows.close() method.

Patrali said...

I have found the solution . It's not the modal dialog issue .It's issue of mixing up http and https . Remove all the "http" part from ant link declared . Instead use something like
src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

and you should be fine.

Roman Gherman said...

Hello, I'm glad that you have found the solution.
Sorry, I was not able to get to the computer earlier.

Anonymous said...

I am having some difficulty using your downloaded example with ASP.NET. Basically,

1)rename the form to formname.aspx.
2) Next add a server based button to the form and attach code to the onclientClick method. When I press the server side button the popup window appears for a second a disappears.

Roman Gherman said...

Hello,

Please send me your example to rgherman.blog@gmail.com.

Regards,
Roman

Patrali said...

How can I change background color of the dialog?

Roman Gherman said...

Hi Patrali,

You just need to set the background color on the page that you want to dispaly inside the dialog.

Anonymous said...

Roman,

I can't get this to work for the life of me.
What I have to work with is:
a.aspx with b.js and jquery ui files included:
in a 'a': id="EditLink" onclick="DoEditLayout();" href="javascript:void(0);">"Edit Layout
DoEditLayout() calls window.PopUpPage(popUpPage,arg1,arg2,...).

PopUpPage is located in b.js., which is where I included you code from above. I call $.showModalDialog({ url: popUpPage}); but nothing happens.

Your code for popUpPage.aspx was also added to that page. What is my problem?

Thanks,
TC

Roman Gherman said...

Hi Anonymous,

Are you able to launch the application that is provided at the end of my post?

maybe you have an exception somewhere in the code?

Not sure I can help you much without looking at your code.

Luis Escudero said...

Roman

I'm using the show modal whith jquery in some aplications and it's working great, but I have a cuestion, how can I send a message before the popup window is closed with the cross of the popup?

thank's a lot man

Roman Gherman said...

Hi Luis,

You can modify the code a little bit.

find this piece of code:
var $dialogWindow = $frame.dialog({
autoOpen: true,
modal: true,
width: opts.width,
height: opts.height,
resizable: opts.resizable,
position: opts.position,
overlay: {
opacity: 0.5,
background: "black"
},
close: fns.close,
resizeStop: fns.adjustWidth
});

and replace with:
var $dialogWindow = $frame.dialog({
autoOpen: true,
modal: true,
width: opts.width,
height: opts.height,
resizable: opts.resizable,
position: opts.position,
overlay: {
opacity: 0.5,
background: "black"
},
close: fns.close,
beforeClose: function(){alert('test')},
resizeStop: fns.adjustWidth
});


See this new line added: beforeClose: function(){alert('test')},


you can then modify the code to get the beforeClose function by parameters - exactly how it is now implemented for "Close"

Regards,
Roman

Chana said...

Hi, I'm using your showmodal, really nice by the way :)
But inside a modal I call for another modal and at the beginning the second modal opened inside the first so I tried using the parent.$showModal but now the first modal doesn't return the value that I chose, do you know how can I return the value correctly?
The first modal returns the value correctly only if I don't open the second modal.
Thank you!!

Pradeep said...

Hi, I'm using your showmodal, awesome work :)
But a small issue is there... can i know how to enable "x" image in the modal window..??

Thanks
Pradeep

Roman Gherman said...

Hi,

Chana: you should open the second modal right from the first modal opened. This way the second modal will be opened inside the first modal. The only thing here is that you will not be able to drag the second modal out of the first modal.


Pradeep: the x image should be visible, that is a jquery dialog.

Regards,
Roman

Mahesh said...

Hi Roman,

At first..congrats for gr8 work & i need to appreciate your patience to support each and every query personally.

I'm able to run this plugin in Chrome (version: 20.0.11..). However,when i click on Modal Dialog and try to move over the screen(drag)..i'm facing following problems.Please throw some light on this.

1)When i run your sample code and try to drag the modal window..to the right side..an horizontal scroll bar appears and it just moves on.I expect,it shouldnt move beyond the screen..and horizontal scroll bar shouldnt come.

2)When i use your plug-in in our project and try to move the modal window...it is not releasing the mouse.I cannot take out the mouse from the modal window.

Please let me know,if i'm not clear.

Thanks,
Mahesh

Pradeep said...

Hi Roman,

This is Pradeep. I found out the solution for the "X" image in the titlebar.. I just want to know how can we fix the x-offset and y-offset rather the top and left co-ordinates of the modal dialog..Please help me out in this.

Yang said...

Hi Roman,

Good work, your solution to the window.showModalDialog() cross browser problem is the best one I've came across.

I tried using your solution on our site, but there is a problem with Doctype declaration in IE 9 and Google Chrome (works in Firefox). The problem is that, if you have Doctype in your site HTML, then the close popup doesn't work. I tried to debug the window.close() function, but when my debugger stepped into the JQuery functions, things got too confusing for me.

You can reproduce the problem by adding any of the HTML 4.01 Doctype declarations on top of your extremedevStart.html

Any chance I can trouble you to have to look at it for me? Workarounds you can think of?

Thanks,

Yang

Yang said...

Find a workaround for IE 9 & Chrome not closing the popup if Doctype is used problem.

Use:

$dlg.dialogWindow.dialog('close');

instead of:

window.close();

Thanks for your work again Roman

Roman Gherman said...

Hi Yang,

Sorry, I didn't have had a change to look at the problem stated by you. Anyway it looks like you have already solved it.
Thanks for your suggestion, I will add it to the article.

Regards,
Roman

Roman Gherman said...

Hi Pradeep,

As I said this is a simple jquery dialog you can do with it whatever it allows.

鄧貞德 said...

Hi Roman,

How can I change titlebar color and titlebar height of the dialog?

BR.

Casian said...

Hi does this work with ASP.NET? Cause I can't manage to pass arguments and return values. Also, when I use an ASP button to launch the pop-up, it appears and vanishes immediately. However it works fine when I use an HTML button. Thanks

Casian said...

Ok, I've confirmed that it works :). Also, how can I pass multiple arguments to the window?

Roman Gherman said...

Hi 鄧貞德,
I think you can do it with CSS:

.ui-widget-header {
background: purple;
}

-------------
Casian, I am glad that you've managed to solve the problem,
what about multiple arguments: yes
You can do it by assigning to dialogArguments something like this:
{
arg1: 123,
arg2: 'test'
...
argn: 'valueN'
}

Swapnil said...

Hello Roman.

I was wondering if it was possible to call showModalDialog from
inside an iframe so that it doesn't load up inside the iframe (ie, a
link is clicked in the iframe and it pops up on the parent page). Any
suggestions that you might have to get showModalDialog to work in such a
way would be great.

I want the dialogbox to popup on the body/div of the main page.But its getting popped up inside the Iframe.
How can I change the parent from its iframe to the body/div?

I tried this :
$frame[0].document.parentWindow.name = $frame[0].document.parentWindow.window.parent.name;
But didn't help.

Thanks.

Roman Gherman said...

Hi Swapnil,

I don't think that is possible with small changes and with current code, because we will have 2 popups on the same window. This code was not written for that case.

You also need to think on the flow that you have, because popup in another popup is not looking good. You know - it is not user-friendly (my opinion).

Regards,
Roman

Swapnil said...

thanks,
I was asking the same question which @pedro asked on 05 April, 2011 14:18 ... scroll at the top comment.

I also want one more modification ie,
I want the modaldialog to open were i click on the link or anywere,Can I sent X and Y position to it?

Roman Gherman said...

Hi Swapnil,
when calling the showModalDialog, you can pass as an option:

position : '100 300'

Anonymous said...

Thanks a lot is very useful

Anonymous said...

Hi Roman,

First of all, thank you for sharing your great work. I tried this on safari and IE10 and it seems like the iframe's dialog property is no longer supported? Please let me know what I am missing.

Thanks

Anonymous said...

Hi Roman,

Thanks for this post, this is very handy.

I am getting "TypeError: 'undefined' is not a function (evaluating '$frame.dialog')" when I tried your sample code. Seems something wrong with variable $frame not getting initialized. Do you have an idea what might be causing this error?

Swapnil said...

@Roman Gherman
I would like to know if there is any way I can make it synchronous?

What I want to do is like send the return value back to the calling function.
eg.
function abc(){
var x=xyz();
}

function xyz(){
var url = 'test.html';

$.showModalDialog({
url: url,
height: 500,
width: 900,
scrollable: false,
onClose: function(){
var returnedValue = this.returnValue;
//return this returned value to function abc?
}


});

}

Well this is juz a prototype but I have a real complex stuff to handle... and Its based on this, so I want to get the return value back.I cant write the code from abc() inside the onclose of modaldialog.

Roman Gherman said...

Hi Swapnil,

I see what you mean, but you can't do it synchronous. I could not find a possibility in javascript to stop the further execution and wait for the popup to close.

you will need to make it with a callback function.

Sorry.

Unknown said...

Hi Casian,

does this work with ASP.NET? Cause I can't manage to pass arguments and return values. Also, when I use an ASP button to launch the pop-up, it appears and vanishes immediately. However it works fine when I use an HTML button. Thanks


Roman Gherman said...

Hi Saju,

it probably disapears because the asp.net buttons performs a postback - you need to return false on click method of the button.

Anonymous said...

great tool.
i am havng and issue with modal postion on ios, is makes the source page larger and possiton modal beloe the parent.
thoughts

Roman Gherman said...

Hello, sorry I didn't tried it on ios. I have no Idea how it behaves on it.

D said...

Hi Roman Gherman,

Which javascript libraries i have to add in my parent and child pages? it's not working at all for me. Error is 'jQuery' is undefined. I have added following references.
"jquery-1.10.2.js", "jquery-1.4.2.min.js" and "jquery-ui-1.8.2.custom.min.js"

please help me.

Thanks.

Roman Gherman said...

Hi D,

It passed a lot of time since I didn't took a look into this code, but as I see from my sample it requires:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js

please include these two scripts into your code. before including script with showModalDialog.

A general note:

I am glad for all people which I helped, this code is not maintained anymore, as I think current browsers are pretty good to handle everything as required.
In case someone will still need this showModalPopup plugin, or some modifications for it, please contact me and we will see what we can do.

Regards,
Roman

Anonymous said...

First of all, thank you for sharing your great work. Its very handy and working out well except for cross domain pages.
Getting access denied error in IE and other browser just ignores it.
Please let me know if I am missing something or you have any solution to open a cross domain page which was accessible via window.showmodaldialoge and not working in your plugin because of the Iframe logic you have in it.

Thanks and Regards.

Roman Gherman said...

you will most probably have to remove a part of the code:

if ($dialogWindow) {

var maxTitleLength = 50;
var title = $(this).contents().find("title").html();

if (title.length > maxTitleLength) {
title = title.substring(0, maxTitleLength) + '...';
}
$dialogWindow.dialog('option', 'title', title);
}


but this will disable title display in the dialog.

Anonymous said...

Hello Roman.

Thanks for your work.

I tried your solution but it does not work : nothing popup ( i use Google Chrome Version 37.0.2062.124 m).

I think that this is probably because i have forgotten something : i know nothning in jQuery (how to use it, to call it, if we can mix Javascript and jQuery, etc).

I think it would be VERY USEFULL for all mankind that you provide us a full complete simple example with :

- The full HTML source of the main calling page.
- The full HTML source of the popup page.

This way, every one would be able to see how excatly to implement your code.

Thank you !

Roman Gherman said...

Hi BlueMan,
At the end of this article there is a link to the example files:
https://docs.google.com/uc?id=0B7GDmKvYNr_4YTYwODJkZDYtNGVkYS00ZTNlLWI2NWEtYzE4ODBlZGU1NzE3&export=download&authkey=CMDIweML&hl=en

Siraj Hussain said...
This comment has been removed by the author.
Siraj Hussain said...

Hi Roman,
You did a great job, i have implemented you code in different pages. I am facing just one problem.
After pagepostback window.close is not working even i have alos tried $dlg.dialogWindow.dialog('close'); but no effect
What actually i am doing.
i have aspx button Save on code behind event i just save the data and call window.close from c# and it does not work.
here is link:
http://stackoverflow.com/questions/28947852/after-button-click-javascriptwindow-close-is-not-working
any help please?

Roman Gherman said...

Hi Siraj,

Sorry to tell you, but this is a very old article which I wrote years ago, I can not answer your question as it will take long time for me to recover what and how it is working here.

Regards,
Roman

Siraj Hussain said...

even any asp:button click will stop working window.close

Unknown said...
This comment has been removed by the author.
Unknown said...

Hi Roman,
Thanks for your post. it is really very helpful.
I am facing a problem, while open only one dialog.. it works great, but when I open a dialog over another dialog, the call back method of parent dialog is not executing
plz help

Unknown said...
This comment has been removed by the author.
Unknown said...

hi Roman,
i am facing a problem,when i open the showmodaldialog within for loop , it opens all dialog window simultaneously, but i want open dialog window one by one.
please tell me.

Rohan Kota said...

Hi Roman,

Can you please mail me sample code for the same to kota.rohan@ymail.com

Roman Gherman said...

Hi Rohan,

https://docs.google.com/uc?id=0B7GDmKvYNr_4YTYwODJkZDYtNGVkYS00ZTNlLWI2NWEtYzE4ODBlZGU1NzE3&export=download&authkey=CMDIweML&hl=en

here is the link - it is also stated at the end of article

Anonymous said...

Hi Rohan,

How do return the value back to the parent and close the popup window automatically after I click the Save button.

Johnson said...

Hi Roman,

How do I return the value back to the parent and close the popup window automatically after I click the Save button.

Anonymous said...

Hi Roman,

I just downloaded your source code, and I open html file on 3 browsers i.e chrome, firefox, I.E (I.E version is 11.0).

But on I.E, Pop Up Dialog did not closing on pressing "Close PopUp".

What should i do so that I can close that Dialog ?

Unknown said...

Hi Roman.

First, congratulations for your work. But, I have a need and I could not figure out how to do it.

I need to change the font family, font size and color of the Title. How do I do that?

Thanks in advance,

Unknown said...

First of all Thank you for your work...your code is one of the few pieces of code I found on the web. I have used this code for years and it has worked flawlessly until about a month ago. So If you care...The code does not work in Chrome...

extremedevTestPopup.html:31
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
at getParentWindowWithDialog
(file:///C:/Chuck/extremedevShowModalDialogSample/extremedevShowModalDialogSample/extremedevTestPopup.html:31:12)
at file:///C:/Chuck/extremedevShowModalDialogSample/extremedevShowModalDialogSample/extremedevTestPopup.html:22:19


this is line 31:

if ($(p.document).find('#iframeDialog').length) return p;

If you could help me fix this I would so appreciate it. I think the problem is that the extremedevTestPopup.html has to be loaded into an existing iframe, however I do not have a clue how to do that.

I know it has been six years...but that is what you get for writing good code :-)

Charlie
CharlieElliott785@hotmail.com

Omri said...

For what it's worth, this implementation still works almost 10 years later. Thank you for your hard work.

Roman Gherman said...

Good to hear that Omri. Thank you

Omri said...

Hi Roman quick question for you:
I'm opening the dialog in a JSP file and all is working well. That JSP then loads another JSP into an iframe. So I have main page->dialog->entry JSP->target JSP. The target JSP has some buttons that I want to map to closing the dialog, but I'm having trouble using the window.close function. I was wondering if anything comes to mind. Thanks again.

Omri said...

Hi Roman, I have tried some things and have an update:

From within the target JSP page, on click of a button I have called parent.callerwindow.$('#iframeDialog').dialog('close');

parent I think is the page that holds the "target code", and callerwindow is originally prntWindow in your code. This code works the first time I open the dialog. I click a cancel button and the dialog closes. Then when I open the dialog again, and click cancel, the dialog page does not disappear but the contents are replaced with "[object Object]". Let me know what you think or if I can clarify anything.

Roman Gherman said...
This comment has been removed by the author.
Roman Gherman said...

Hi Omri,
Sorry but as this article was written about 10 years ago, I vaguely remember anything. You will have to dig it yourself.

Omri said...

Not a problem Roman, I understand. If it's not too much to ask, I was wondering then if you might remember how to retrieve the return value after it's set in the target window?
I understand if you don't remember it too well or are pressed for time, your contributions have helped me so much already!

Roman Gherman said...

Omri,

$.showModalDialog({
url: url,
height: 500,
width: 900,
scrollable: false,
onClose: function(){ var returnedValue = this.returnValue; }
});

I think "var returnedValue" should contain the value.

Anonymous said...

Hi Roman,

I was unable to get it work and I was also unable to get your sample code: Can you send a copy of your sample code on chankunkin@gmail.com?

Really appreciate it...

Thanks.

Chan

Kun Chan said...

Hi Roman,

So sorry, can I have an example on how postBackElementId is used?

I am asking this because I cannot download the file from the link.

Really appreciate for your response.

Thanks.

Chan

Roman Gherman said...

Hello Kun Chan,
Sorry but I do not have the sources any more.

Dress said...

Amazing solution. It's really helpful. Thank you, Roman Gherman.

Post a Comment

your thoughts are welcome:

Need more? Leave comments and subscribe to my blog.

.