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

我继承了一个使用Developer X的jQuery UI的项目。而不是使用jQuery UI，Developer X使用自己的代码使对话框看起来是“模态的”。她使用了一个“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;
  }

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

1 个答案: