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" );

 });
 });

编辑：我想我应该问这个问题-为什么会出现这种行为，有没有办法识别提示工具是如何触发的，或者只要关闭模态框就可以停止它再次出现？

- BlueDreaming

Answer 1

对话框小部件具有 open() 事件。我倾向于使用它来禁用工具提示（像这样），并在 close() 上重新启用它们，通过为您的 init 函数命名并调用它。

类似于：

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

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

- isherwood

---

这最终变得非常有帮助 - 当我尝试它时，它没有按预期工作，我发现对话框关闭时的动画长度会影响函数的时间。感谢您的帮助。 - BlueDreaming

Answer 2

我曾经遇到过同样的问题。解决方法是添加一个“确定”按钮。

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

- Bruce Thompson