jquery - Blocking background content and focus on modal dialog

Question

I am trying to block the background with my two jquery modal dialogs until the user closes the window. Any idea on how to achieve this?

By "blocking the background" I mean disabling the other elements on the page (i.e. making other elements unclickable).

Here is my code below:

            // sign up dialog
        $( "#aboutus_dialog" ).dialog({
            autoOpen: false,
            show: "fadein",
            hide: "fadeout"
        });

        // sign up dialog
        $( "#signup_dialog" ).dialog({
            autoOpen: false,
            show: "fadein",
            hide: "fadeout"
        });     

        // about us modal
        $('#aboutus').click(function() { 
            modal: true,
            $("#aboutus_dialog").dialog("open");
            return false;
        });

        // about us modal
        $('#signup').click(function() { 
            $("#signup_dialog").dialog("open");
            return false;
        });
    });

Answer 1

Is this what you're looking for

http://jqueryui.com/demos/dialog/#modal

It does block the background you have the view source button. Do you have any overlay at all?

Try setting it manually(not recommended but rather trough css) :

$(".ui-widget-overlay").attr('style','background-color: #000; opacity:1; z-index:1000;');

And of course setting the modal option to true.

If the color is too strong decrease the opacity accordingly.