Question

I do not have the jQuery CSS modal files added to my site but assumed that when modal is set as true it would still disable the rest of my page. This does not seem to be happening. Is there anything that my code is doing that would disable the ability for the form to be modal?

$("#foo").click(function(){
    $("#bar").dialog({
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
            "Save": function(){
                $.post('remote_foo.php', $('#bar').serialize(), function(data){
                    $('#tracediv').html(data);
                })
                $(this).dialog("close");
            },
            "cancel": function(){
                $(this).dialog("close");
            }
        }//end of buttons
    }).('open');//end of jquery dialog
})// end of click function

Answer 1

jQuery UI Dialog doesn’t “disable” the rest of your page. It works by placing a div on top of the page so if I try to click on anything I am actually clicking on that overlaying div, and not the elements beneath. This gives them the illusion of being disabled though they really are not.

Since you do not have the CSS included on your page the overlay div is more than likely not being formatted correctly and not blocking access to your underlying elements.