Question

我已经实现了这个jqueryui dialogextend对话框。我希望这能够最小化当我点击正文中的任何地方，因为我使用此对话框上传一些文件，并允许主页面用户输入一些数据。所以我的问题是如何在用户单击父页面时最小化dialogextend对话框（现在，当用户单击最小化按钮时，它会工作）。

这是我的jqueryui dialogextend对话框

$(".myClass").click(function () {
    $("#somediv").dialog({
        width: 400,
        height: 450
    }).dialogExtend({
         "closable": true,
         "maximizable": false,
         "minimizable": true,
         "collapsable": false,
    });
    return false;
    });

它的外观如何

因此，当用户单击父页面中的任何位置时，我希望对话框最小化。有什么建议？

Answer 1

然后经过长时间的许多尝试失败后，我设法找到了几种方法。

第一种方法是添加一个$（document）.On方法，向主div添加一个click事件，允许你跟踪页面上的任何点击并隐藏对话框（如果显示）

上述方法有效，但我认为更好的解决方案是覆盖jquery dialogextend的最小化和关闭按钮的现有功能，这样可以隐藏并在点击按钮时显示对话框，并可以使用对接功能，如如果对话框扩展事件被覆盖，也会出现这种行为。

如果有人在将来需要这样做，我就是这样做的。

首先，我将创建jqueryui dialogboxextend对话框

            $(".myCusClass").click(function () { 
            $("#divDialog").dialog({
                width: 400,
                height: 450
            }).dialogExtend({
                "closable": true,
                "maximizable": false,
                "minimizable": true,
                "restore": false,
                "collapsable": false,
                beforeMinimize: function (event, ui) {
                    event.preventDefault();
                    $("#divDialog").hide();
                    $("#minimizedDiv").show();
                    $("#divDialog").close();
                },
                beforeRestore: function (event, ui) {
                    event.preventDefault();
                    $("#divDialog").hide();
                    $("#minimizedDiv").hide();
                }
            });
            return false;
        });

请注意我已经覆盖了beforeminimize和beforerestore方法，因此我可以隐藏并显示对话框而不实际关闭对话框。以下是对码头的解释。

<div id="minimizedDiv" class="panel  panel-default " style="width: 200px; margin-left: 10px; margin-top: -20px; display: none;">
   <div class="panel-heading top-bar ">
      <span class="ui-dialog-title" style="width: 150px; margin-left: -5px"><b style="vertical-align: top;">Attach files...</b>
      </span>
      <a class="ui-dialog-titlebar-plus ui-corner-all ui-state-default" href="#" title="maximize" role="button" onclick="RestoreWindow()"></a>
      <a class="ui-dialog-titlebar-close ui-corner-all ui-state-default" href="#" title="close" role="button" onclick="CloseWindow()"></a>
   </div>
</div>

以上内容将作为最小化对话框时使用的泊坞窗。以下是用于从docker恢复和关闭对话框的函数

function RestoreWindow() {
        $("#divDialog").show();
        $("#minimizedDiv").hide();
    }

function CloseWindow() {
        $('#divDialog').dialog('close'); 
    }

使用按钮最小化JQuery Dialogextend

1 个答案: