当打开对话框“模态”属性时

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; 
    }