Question

有没有办法将自定义按钮注入jQuery UI对话框的标题/标题栏？我通常会禁止关闭按钮。同时我使用了大量的对话框，并且用户在听到音频警报时需要不时访问另一个对话框（错误日志）中的信息。事实上，只有在隐藏当前模态对话框时才能访问其他对话框。能够在对话框标题栏中插入一个不显眼的按钮会很方便，因此希望这样做的用户可以尝试找出导致音频错误警报的原因。

换句话说 - 是否有可能劫持默认关闭按钮，改变其外观，感觉和功能？因此，它不是显示关闭框，而是显示帮助/问号符号，点击它时会弹出另一个对话框。

Answer 1

为什么会发生这种情况完全可能！虽然，它有点hackish ......

对话框对象中没有真正的选项可以执行此操作，但可以完成。第一步是更改create上关闭按钮的类（如下所示）。更改.ui-dialog-titlebar-close span的类将允许您在符号中添加close（在本例中为帮助图标）

$("#dlg").dialog({
    create: function(event, ui) { 
        var widget = $(this).dialog("widget");
        $(".ui-dialog-titlebar-close span", widget).removeClass("ui-icon-closethick").addClass("ui-icon-help");
    }
});

接下来，您希望确保在用户单击对话框时不关闭对话框，因此您可以覆盖beforeClose选项。这也在对话框创建中完成，如下所示。需要做的一件事是该方法必须返回false，这将阻止对话框关闭。

$("#dlg").dialog({
    ...
    beforeClose: function(){
        return HelpDialog();
    }
});
function HelpDialog(){
     //Show your help dialog...   
     return false;
});

我为它做了一个JSFiddle来帮助展示它。希望这是你正在寻找的（或接近它）！

Answer 2

任何遇到此线程的人的注释。这是我劫持关闭框功能

function hijackDialogCloseButton(hlp)
{
 var tbc = $('.ui-dialog-titlebar-close:visible');
 if (0 < tbc.length)
 {
  tbc = $(tbc[tbc.length - 1]);
  tbc = tbc.find(">:first-child");
  tbc.removeClass("ui-icon-closethick").addClass("ui-icon-help");
  tbc.bind('click',function(){useHelp(hlp);return false;});
 }
}

按顺序进行了一些解释

从对话框的打开事件处理程序中调用此方法。
该功能允许堆叠模态对话框：它只更改最顶层模态对话框的关闭按钮
在我的项目中，我抓住click事件并调用内部 useHelp 方法，该方法在单独的窗口中显示相关的帮助URL。您可能想要做其他事情。如果是这样，在关闭按钮中使用另一个图像可能更合适。您将找到jQuery UI图标的完整列表here。

jQuery UI对话框标题/标题 - 自定义按钮

2 个答案: