showModalDialog in Firefox and frames

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.

29 thoughts on “showModalDialog in Firefox and frames”

  1. 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.

  2. 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).

  3. 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.

  4. 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.

  5. In IE is 2 types of modals Showmodaldialog, showmodlessdialog.
    I believe mozila modal = showmodlessdialog (so you can interact with parent window).

  6. 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.

  7. 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.

  8. 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

  9. 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

  10. 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.

  11. 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).

  12. 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?

  13. 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

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

  15. 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?

  16. 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.

  17. 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.

  18. 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.

  19. 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).

  20. 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.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.