模態按鈕上的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");
            }
         }
    });