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.

Answer 2

when i changed modal value to 'true' (in angular js) all background elements got disabled.here is my code attached:

    var options = {
                    autoOpen : false,
                    modal : true,
                    close : function(event, ui) {
                        console.log("Predefined close");
                    }
                 };

    dialogService.open("myDialog" + k, "dialogTemplateload.html", model, options)
    .then(
            function(result) {
                console.log("Close");
                console.log(result);
            },
            function(error) {
                console.log("Cancelled");
            }
        );