« Cafe Vergnano, 62 Charing Cross Road, London | Main | 49th London Film Festival »

showModalDialog in Firefox and frames

October 05, 2005
Keywords:

I use Firefox exclusively and every now and then I come across a site that is crippled. This means that parts of it will not work in Firefox because the site is using some kind of IE only functionality.

One example is the function showModalDialog. This will create a modal pop-up when using IE but because it is not a W3C standard, it is not implemented in Firefox (Mozilla) and will just cause a JavaScript error.

Greasemonkey is a very powerful extension for the Firefox browser that lets you inject your own JavaScript into any web page. This includes overriding any present functionality.

While this can be used to bypass poor security implementations a far better use is to fix usability errors or mash together information from different sites.

I present you my first Greasemonkey script. It is a workaround for showModaldialog by replacing it with a standard confirm dialog: "Are you sure?".

// Author: David Kaspar
// ==UserScript==
// @name showModaDialogFix
// @description Implement show modal dialog in Firefox
// @include     http://<enter your site(s) here>
// ==/UserScript==
window.showModalDialog = function() {
            return window.confirm("Are you sure?");
}
Install the script

If the site you are visting is using frames, you may have to use the below version and insert the name of the frame that is calling the showModalDialog function:

if (window.frames.frameNameHere) {
        window.frames.frameNameHere.showModalDialog = function() {
            return window.confirm("Are you sure?");
        }
}

Update 04/05/2007
No progress with Firefox modal windows so instead a work-around: forced focus on pop-up.

During the latest cross browser compatibility push at our company, a team member devised this work-around and it works sufficiently in all browsers we tested (IE6, IE7, FireFox 2, Safari, Opera).

The idea is to force focus on the pop-up window. This is achieved with the javascript function window.focus().

This method will not work if the user has JS switched off but since JS is a basic requirement for our services, we can expect JS to always be on.



Related entries:

Comments

  1. aubery Says:

    no gravatar

    That good to know but using showModaDialog has it advantages is there a command with firefox that does the think

    David says:

    Mozilla based browsers support adding 'modal=yes' to the third argument in a window.open. This will keep the opened window in front of the parent window. FF 1.5 was rumored to support this but I have not confirmed this.

    http://www.mozilla.org/docs/dom/domref/dom_window_ref76.html

  2. Geekman Says:

    no gravatar

    The modal=yes argument does work in Firefox 1.5

    David says:

    It does not work satisfactory. While it forces focus on the pop-up window, it still allows interaction with the parent window.

    The showModalDialog disables interaction with parent windows making it a truly modal pop-up.

  3. Naveen Malik Says:

    no gravatar

    Your this solution is not working.
    I am not succeed to create a model dialog when i am using fire fox as my web browser.
    Please suggest me some solution for it.

    David says:

    Naveen,

    The article describes a solution to avoid getting JavaScript errors when using FireFox and visiting a web site that insists on using the IE only function showModalDialog.

    As far as I am aware there is no real modal dialog solution for FireFox at the moment (modal=yes will get you partially there).

  4. Sivakumar Says:

    no gravatar

    How to make model dialog both in IE and Mozila?

  5. B4rT Says:

    no gravatar

    Here is the solution for your problem:
    http://www.hedgerwow.com/360/dhtml/dialog_window/dialog_window.htm
    Unfortunatelly it desn't work for Firefox 2 (I don't know yet why)

    Bartek

    David says:

    Yeah, that looks promising until you try it. The pop-up window is on top but is not really modal because you can still interact with the original window below.

    In IE, modal is truly modal because no interaction with other IE windows is possible until the pop-up has been dismissed.

  6. Shawn Says:

    no gravatar

    personally.. I feel Firefox's implementation of the modal feature is better.

    It allows interaction with the parent window which is what I need..

    If I wanted to have a window Always-On-Top AND Always-In-Focus, I'd have used javascript to refocus the window onBlur.

    David says:

    That is really handy for you but I still believe it is not how modal windows are supposed to work.

    From the Mozilla docs: "The user cannot return to the main window until the modal window is closed. A typical modal window is created by the alert() function."

    Problem with your suggested solution is that people without JS would not get the modal behaviour. I believe that a built in solution in the browser is preferred.

  7. Vaidas Says:

    no gravatar

    In IE is 2 types of modals Showmodaldialog, showmodlessdialog.

    I believe mozila modal = showmodlessdialog (so you can interact with parent window).

  8. Michel Says:

    no gravatar

    I need in Mozilla show modal and I can't interact with parent window.

  9. Uday Says:

    no gravatar

    Can anyone give me the equivalent of window.ShowModalDialog in Mozilla browser.

  10. Rigre G. Grciandía Sóñora Says:

    no gravatar

    In FF you can't use showModalDialog function, also you can simulate in some manner a popup using a div tag inside your page.

    The problem with this solution is that after you open the div tag you can access to the rest of the components in your page (not exactly the desirable behavior associated to a modal form).

    Maybe you can implement in some manner a java script function that invalidate events ion the rest of controls of your page.

  11. Stu Says:

    no gravatar

    W3C is a lovely implementation but as usual all things being equal some are more equal than others. I think FF needs to catch up with IE7. I could program a plug-in to hook the showmodaldialog but then the problem is people would need to install it which will be unlikely.
    The DOM is great because now I only have to code JS in 1 way for all browsers however I still have to implement a different W3C CSS for each type of browser! fix that then I be happy.

  12. Scorpy Says:

    no gravatar

    showModalDialog functionality can be acheived by window.open method and the page u are opening write set the focus on onBlur() event may be this will solve the problem

  13. vik Says:

    no gravatar

    hie scorpy

    can u plz give me an example for how to do this? i mean a code example of setting focus to onblur()

    vik

  14. js Says:

    no gravatar

    i have created Menu having sub menu, using javascript and css. It is working properly on IE but not showing sub menus in Mozila Firefox.

    so kindly send me a code through which i could remove this problem.

  15. Steve Says:

    no gravatar

    Using onblur="window.focus();" in the body is a nice idea, unfortunately it just doesn't always work. If the user plays around with clicking other windows in the taskbar, you can find your way back to the parent dialog, which will then accept user input (which would more than likely take away the point of using a modal dialog). Also, it gets annoying when trying to access other non-browser applications and the "modal" dialog keeps wanting to pop up in front (it should be only tied to the parent browser). I think more browsers should support some flavor of this functionality (for those who hate modal dialogs, don't tell me you don't use CONFIRM or ALERT boxes. If used sparingly, I believe modal dialogs have a place, but feel free to disagree).

  16. dg Says:

    no gravatar

    for Mozilla browser try using the below code

    netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserWrite');
    window.open('test.html?params='+ params +'', 'TEST', 'chrome,centerscreen,dependent=NO,dialog=YES,modal=YES,resizable=NO,scrollbars=NO,location=0,status=0,menubar=0,toolbar=0,height='+Height+',width='+Width+',left='+X+',top='+Y);

    hope this helps

    David says:

    Thanks for the tip, I have seen UniversalBrowserWrite being mentioned before.

    However it didn't work for me. The new window is still not modal.

    Do you have an online example?

  17. dg Says:

    no gravatar

    function Open_Window() {
    netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserWrite');
    var params = 'a|b|c';
    window.open('test.htm?params='+ params +'', 'test', 'chrome,centerscreen,dependent=YES,dialog=YES,modal=YES,resizable=NO,scrollbars=NO,location=0,status=0,menubar=0,toolbar=0');
    }


    this code perfectly work for mozilla firefox 2.0.0.3

  18. KJS Says:

    no gravatar

    How to get response back from the modal window? How do I know if user has clicked 'Yes' or 'No' button in modal window.

  19. DJ Says:

    no gravatar

    dg... if i run ur code then line "netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserWrite');"
    gives an error "Error: uncaught exception: A script from "http://localhost:1010" was denied UniversalBrowserWrite privileges"

    do i need to configure something before running the same?

  20. Bhavana Says:

    no gravatar

    I am facing a similar problem. I want to display a modal dialog. I used the showModalDialog function. This works in IE but doesn't work in Mozilla.

    Please help.

    David says:

    All the help is above.

    You can use a GreaseMonkey script to make the site compatible with FireFox or...

    To provide similar functionality in FireFox (Mozilla) we have found a JavaScript work around to be the best solution: force focus on the modal window or...

    A few users report success with the modal=YES parameter in combination with PrivilegeManager.enablePrivilege('UniversalBrowserWrite'). I have not been able to confirm this however.

  21. dg Says:

    no gravatar

    hi .... checked this code ..... works fines

    save the below code in a html file and check it

    [html]
    [head]
    [style]
    [/style]
    [script]
    function Open_Window() {
    netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserWrite');
    var params = 'a|b|c';
    window.open('test.htm?params='+ params +'', 'test', 'chrome,centerscreen,dependent=YES, dialog=YES,modal=YES,resizable=NO,scrollbars=NO, location=0,status=0,menubar=0,toolbar=0');
    }
    [/script]
    [/head]
    [body]
    [input type="button" value="Load XUL Test Window" onclick="Open_Window()"]
    [/body]
    [/html]

    replace square brackets with html tag

    David says:

    Thanks for that dg, this version really works and is the first time I see a modal window in FireFox (Mozilla).

    I do get the security warning due to using UniversalBrowserWrite. This could be an issue on some of our sites.

  22. Dave P Nottingham Says:

    no gravatar

    If there is an alternative to ShowModalDialog for bringing multiple amounts of data back from the child to parent window I'd love to hear about it! Window.open works fine for just one selected item but not multiples.

  23. propecia effective Says:

    no gravatar

    propecia rogain 6proscar propecia

  24. Mano Says:

    no gravatar

    Hi All,
    In my project i want a window behave like a modal window with out using modal=yes in firefox.

    is it possible?

    David says:

    Yes with a JavaScript workaround as described above (forced focus).

  25. FBM Says:

    no gravatar

    Hi Dg your code doesn't work

  26. Al Says:

    no gravatar

    you need to enable a part of your FF about:config file for that code to work

  27. noe Says:

    no gravatar

    thanks dg, your script work fine . you are the man. cool :D

  28. Dmitri Farkov Says:

    no gravatar

    What you guys are searching for is a Lightbox. A Lightbox - a JavaScript-powered modal dialog. Looks pretty, compatible with tons of browsers. Just search on Google.

  29. Roman Says:

    no gravatar

    Hi Guys, I can recommend you a workable cross browser showModalDialog jQuery function created by me:
    Here on http://extremedev.blogspot.com

Post a Comment

 *

 *

 

 
Remember Me?

* (you may use HTML tags for style)