模态按钮上的JqueryUI工具提示重新出现在模态关闭上

Question

你好StackOverflowvians！

我正在学习Javascript和JQuery，而且我有一个我不能很好地解决的问题。 我在一些按钮上使用了JqueryUI工具提示。 工具提示使用以下代码显示。 我意识到我的结构和组织技能在代码方面很糟糕，并且可能有一百万种更有效的方法来做我正在做的事情，但是请耐心等待 - 这实际上是我对任何类型的javascript的第一次尝试。

$(function() {

    $("#button-menu").tooltip({
         position: {
         my: "top",
         at: "bottom+10",
         using: function( position, feedback ) {
             $( this ).css( position );
             $( "<div>" ).addClass( "arrow" ).addClass( "top" ).appendTo( this );
        }
    }
});

$("#button-menu").tooltip({ hide: { effect: "fadeOut", duration: 100 }, show: {   effect: "fadeIn", duration: 100 }});
});       

所以当你将鼠标悬停在按钮上时，我正在调用一个工具提示，它非常漂亮，可以满足我的需求。 单击它们时，几个按钮将导致模态对话框窗口。 如果单击a.search，则会获得带有搜索表单的模态对话框窗口。 如果一个人决定简单地关闭模态窗口，它会关闭等等。 我注意到当模态打开时，工具提示关闭，按钮状态返回到未聚焦状态。 当我关闭模态时，工具提示会返回，就像我在按钮上徘徊一样 - 无论我的鼠标位于何处。

我尝试在关闭div的所有按钮的按钮项目时调用模糊，但无济于事。 我可能会尝试接下来在该函数上设置超时，因为工具提示函数在按钮关闭事件后重新启动aria-tooltip类，我想如果我可以等待它，我可以在它打开后关闭它，但感觉马虎。 下面的代码是我对调用对话框和关闭对话框关闭按钮的工具提示的正确方法的解释，但它没有按我认为的那样做。 工具提示仍然重新出现

 $(function() {
 $( "#searchform" ).dialog({
  modal: true,
  autoOpen: false,
  close: function( event, ui ) {$('a.search').blur();},
  show: {
    effect: "fade",
    duration: 500
  },
  hide: {
    effect: "fade",
    duration: 1000
  }
 });

 $( "a.search" ).click(function() {

 $( "#searchform" ).dialog( "open" );

 });
 });

编辑：我想我应该问一个问题 - 为什么会发生这种行为，有什么我可以做的确定工具提示是如何解雇的，或者只是阻止它在关闭模态时重新出现？

Answer 1

Dialog小部件有一个open（）事件 。 我倾向于使用它来禁用工具提示（ 如此 ），并通过命名init函数并调用它来在close（）上重新启用它们。

就像是：

$('.dialogSelector').dialog({
  open: function( event, ui ) {
    $('.tooltipSelector').tooltip('disable');
  }
});

$('.dialogSelector').dialog({
  close: function( event, ui ) {
    $('.tooltipSelector').tooltip();
    // OR
    myTooltipFunction();
  }
});

Answer 2

我遇到了同样的问题。 为我解决的是添加一个'Ok'buton

    $("#dialog").dialog({
        resizable: false,
        autoOpen: false,
        height: 200,
        width: 440,
        modal: false,
        buttons: {
            "Ok": function () {
                $(this).dialog("close");
            }
         }
    });