當打開對話框「模態」屬性時

Question

所以我需要設置模態爲false，當對話框已經打開並且在對話框隱藏後面有疊加層。這是我試過，

當我打開對話框我有一組函數，查詢日曆上的拖放事件，如果它是一個多事件，那麼我需要使對話框不模態，並允許進一步的交互性與日曆移動另一個事件..然後驗證。

$(this).dialog("option", "modal", false); 

當我使用它它不會使對話框的疊加隱藏。我明白錯了嗎？

全碼：

$('<div id="dragDropDialog" title="Appointment Change Information">Change Appointment<p>Time: ' + CV.timeString(fromTime) + ' to ' + CV.timeString(toTime) + '</p> <p>On = ' + (weekday[day]) + ' the ' + CV.dateAbbrv(monthDay) + ' of ' + (months[month]) + ' ' + year + ' </p><p> Inspector ' + $eventDateAndTime.inspector["name"] + '</p></div>').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 > 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("<span class='ui-icon ui-icon-check'></span>"); 
    $(buttons[1]).append("<span class='ui-icon ui-icon-copy'></span>"); 
    $(buttons[2]).append("<span class='ui-icon ui-icon-close'></span>"); 

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

Answer 1

我繼承了從開發X.而不是使用jQuery UI，開發X使用自己的代碼，以使對話框顯示爲「模式」使用jQuery UI的一個項目。她使用了一個「mask」元素，她使用jQuery.fadeIn和jQuery.fadeOut來切換。你可以做類似的事情來獲得你想要的效果。您可以嘗試使用一些像這樣的CSS上手：

#mask 
    { 
     position: absolute; /* important */ 
     top: 0px; /* start from top */ 
     left: 0px; /* start from left */ 
     height: 100%; /* cover the whole page */ 
     width: 100%; /* cover the whole page */ 
     display: none; /* don't show it '*/ 
     background-color: black; 
    } 

    .modal_window 
    { 
     position: absolute; /* important so we can position it on center later */ 
     display: none; /* don't show it */ 
     font-weight: bold; 
    }