Toggle a dialogs "modal" property when open
<p>So I need to set the modal to false when the dialog is open already and have the overlay behind the dialog hide. This is what I have tried,</p>

<p>when I open the dialog I have a set of functions that query a drag drop event on a calendar if it is a multiple event then I need to make the dialog NOT modal and allow further interactivity with th calendar to move another event.. then validate.</p>

<pre><code>$(this).dialog("option", "modal", false);
</code></pre>

<p>When I use this It doesn't make the dialog's overlay hide. Am I getting something obvious wrong??? </p>

<p>Full code:</p>

<pre><code>$('&lt;div id="dragDropDialog" title="Appointment Change Information"&gt;Change Appointment&lt;p&gt;Time: ' + CV.timeString(fromTime) + ' to ' + CV.timeString(toTime) + '&lt;/p&gt; &lt;p&gt;On = ' + (weekday[day]) + ' the ' + CV.dateAbbrv(monthDay) + ' of ' + (months[month]) + ' ' + year + ' &lt;/p&gt;&lt;p&gt; Inspector ' + $eventDateAndTime.inspector["name"] + '&lt;/p&gt;&lt;/div&gt;').dialog({
                  autoOpen: true,
                  width: 600,
                  modal: true,
                  dialogClass: 'dragDropDialog',
                  buttons: {
                    Move: function() {

                            var counterForFinal = 0;
                            $.each(inspectorEventList, function(index, evt) {
                                if (jQuery.data(eventBeingDragged, "fromTo").eventId == evt.eventId) {
                                    counterForFinal++;
                                }
                            });

                            if (counterForFinal &gt; 1) {
                                $(this).dialog("option", "modal", false);
                                alert($(this).dialog("option", "modal"));
                            } else {

                        $(this).dialog("close");
                        $(ui.draggable).animate({opacity: 0}, 200);
                        ui.draggable.css({top:ui.position.top, left:ui.position.left});
                        CV.updateDroppedEvent($calEvent, $eventDateAndTime);
                        dragEndHelp.css({"display": "none"});
                        $(ui.draggable).animate({opacity: 1}, 1000);
                        var bgColorStore = $(ui.draggable).css("background-color");
                        $(ui.draggable).animate({backgroundColor: "#FF2222"}, 500, function() {
                            $(ui.draggable).animate({backgroundColor: bgColorStore}, 1000);
                        });
                            } // if there the event is not a final then we can just move it

                    }, Copy: function() {
                        $(this).dialog("close");
                        ui.draggable.css({top:ui.draggable.top, left:ui.draggable.left});

                        $(dragEndHelp).animate({opacity: 0}, 200);
                        $(ui.draggable).animate({opacity: 0}, 200);

                        $(dragEndHelp).animate({opacity: 1}, 500);
                        $(ui.draggable).animate({opacity: 1}, 500);

                        var bgColorStore = $(ui.draggable).css("background-color");
                        var bgColorStore = $(dragEndHelp).css("background-color");

                        $(ui.draggable).animate({backgroundColor: "#FF2222"}, 500, function() {
                            $(ui.draggable).animate({backgroundColor: bgColorStore}, 1000);
                        });
                        $(dragEndHelp).animate({backgroundColor: "#FF2222"}, 500, function() {
                            $(dragEndHelp).animate({backgroundColor: bgColorStore}, 1000);
                        });

                   CV.updateDroppedEvent($calEvent, $eventDateAndTime);
                    }, Cancel: function(event, ui) {
                        dragEndHelp.css({"display": "none"});
                  $(this).dialog("close");
              }
        },
        close: function(event, ui) {
            $(this).dialog("destroy");
        },
        open: function(event, ui) { 

    //// SOME UI CHANGES TO MAKE BUTTONS MORE INTUITIVE
    var buttons = $('.dragDropDialog .ui-dialog-buttonpane').children('button');

    ////ADD ICON CLASS ACCEPTANCE
    buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');

    ////CHANGE THE BUTTONS DEFAULT SATE TO RED AND GREEN
    $(buttons[0]).removeClass('ui-state-default').addClass('ui-state-submit');
    $(buttons[1]).removeClass('ui-state-default').addClass('ui-state-copy');
    $(buttons[2]).removeClass('ui-state-default').addClass('ui-state-cancel');

    ////APPEND THE ICONS TO THE BUTTON
    $(buttons[0]).append("&lt;span class='ui-icon ui-icon-check'&gt;&lt;/span&gt;");
    $(buttons[1]).append("&lt;span class='ui-icon ui-icon-copy'&gt;&lt;/span&gt;");
    $(buttons[2]).append("&lt;span class='ui-icon ui-icon-close'&gt;&lt;/span&gt;");

    ////PUSH THE CANCEL BUTTON TO THE LEFT SIDE OF THE DIALOG
    //$(buttons[2]).css('position','absolute').css('left','25px');
        }
                   });
</code></pre>
