保持JQuery對話框在鼠標懸停狀態下打開

我想在母版頁上顯示通知，並且我正在使用JQuery對話框。我可以使用下面的代碼實現自動顯示和隱藏頁面加載。但是如果鼠標懸停在對話框上，我想保持對話框打開狀態。保持JQuery對話框在鼠標懸停狀態下打開

$(document).ready(function() { 

    $("#dialog").dialog({ 
     autoOpen: false, 
     draggable: false, 
     resizable: false, 
     height: 100, 
     hide: { 
      effect: 'fade', 
      duration: 2000 
     }, 
     open: function() { 
      $(this).dialog('close'); 
     }, 
     close: function(){ 
      // $(this).dialog('destroy'); 
     }, 
     show: { 
      effect: 'fade', 
      duration: 2000 
     } 
    }); 

    var x = $("#<%= imgNotifcation.ClientID %>").position().left + $("#<%= imgNotifcation.ClientID %>").outerWidth(); 
    var y = $("#<%= imgNotifcation.ClientID %>").position().top - jQuery(document).scrollTop(); 

    // var x = 0; 

    $("#dialog").dialog("open"); 
    $('#dialog').dialog('option', 'position', [x-90, y+25]); 

});

這工作正常，但它隱藏對話框，即使我把div #dialog懸停。我想保持對話框打開，如果它徘徊。

來源

2016-04-27 Bharat Sisode

我不能在這裏看不到任何代碼被觸發時關閉你懸停在對話框中。你確定你的代碼全部在這裏嗎？ –

@Danny H ..是的整個代碼都在這裏。對話關閉事件本身寫入打開事件。 –

顯示對話框後，您立即調用關閉功能。你不能以這種方式來阻止。你可以做的是設置關閉的定時器，停止計時器懸停和重新啓動，當鼠標離開對話框。

你需要一個變量來存儲關閉計時器：

var dialogCloseTimer = null;

在對話框配置，具有1秒（1000毫秒）啓動關閉計時器：

open: function() { 
    var self = this; 
    dialogCloseTimer = window.setTimeout(function() { 
     $(self).dialog('close'); 
    }, 1000); 
},

被配置對話框之後，設置收聽者爲mouseenter和mouseleave事件以停止並重新啓動關閉計時器：

$("#dialog").on("mouseenter", function() { 
    window.clearTimeout(dialogCloseTimer); 
}).on("mouseleave", function() { 
    var self = this; 
    dialogCloseTimer = window.setTimeout(function() { 
     $(self).dialog('close'); 
    }, 1000); 
});

來源

2016-04-27 13:57:25 aorcsik

這就是我一直在尋找的..非常感謝.. :-) –

請參閱本例中

var i = 0; 
 
$(".overout") 
 
    .mouseover(function() { 
 
    i += 1; 
 
    $(this).find("span").text("mouse over x " + i); 
 
    }) 
 
    .mouseout(function() { 
 
    $(this).find("span").text("mouse out "); 
 
    }); 
 

 
var n = 0; 
 
$(".enterleave") 
 
    .mouseenter(function() { 
 
    n += 1; 
 
    $(this).find("span").text("mouse enter x " + n); 
 
    }) 
 
    .mouseleave(function() { 
 
    $(this).find("span").text("mouse leave"); 
 
    });

.out { 
 
    width: 40%; 
 
    height: 120px; 
 
    margin: 0 15px; 
 
    background-color: #d6edfc; 
 
    float: left; 
 
} 
 

 
.in { 
 
    width: 60%; 
 
    height: 60%; 
 
    background-color: #fc0; 
 
    margin: 10px auto; 
 
} 
 

 
p { 
 
    line-height: 1em; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="out overout"> 
 
    <span>move your mouse</span> 
 
    <div class="in"> 
 
    </div> 
 
    </div> 
 

 
    <div class="out enterleave"> 
 
    <span>move your mouse</span> 
 
    <div class="in"> 
 
    </div> 
 
    </div> 
 

 

 
</body>

現在當你的鼠標將在該div只是做你的對話框

來源

2016-04-27 14:21:44 Nicholas

保持JQuery對話框在鼠標懸停狀態下打開

回答

相關問題