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

问题描述

| 因此，当对话框已经打开时，我需要将模式设置为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\",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\"},1000);
                        });
                        $(dragEndHelp).animate({backgroundColor: \"#FF2222\"},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\');
        }
                   });

解决方法

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