2016-04-27 14 views
5

Ana sayfada bildirim göstermek istiyorum ve bunun için JQuery iletişim kutusunu kullanıyorum. Aşağıdaki kodu kullanarak Otomatik gösterme yapabilir ve sayfa yüklemesinde gizleyebilirim. Ancak, Mouse tarafından doldurulan iletişim kutusunu açık tutmak istiyorum.JQuery iletişim kutusunu fareyle açık tutarak farenin açık olduğundan emin olun

$(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]); 

}); 

Bu işe yaramaz ancak div #dialog işaretlese bile bir iletişim kutusu gizler. İletişim kutusu açıkken iletişim açık tutmak istiyorum.

+0

diyaloğu hover. Kodunuzun bütününün burada olduğundan emin misiniz? –

+0

@Danny H .. Evet tüm kod burada. Dialog yakın olayı, Open olayının kendisinde yazılır. –

cevap

0

İletişim kutusu görüntülendikten sonra hemen kapat işlevini çağırırsınız. Bu şekilde durduramazsın. Yapabilecekleriniz, bir zamanlayıcıda kapanmayı ayarlayıp, zamanlayıcıyı duraklatmada durdurup yeniden başlatıldığında, fare iletişim kutusundan ayrıldığında. iletişim yapılandırıldı sonra

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

: iletişim yapılandırmada

var dialogCloseTimer = null; 

1 saniyede (1000 ms) ile yakın sayacını başlatmak:

Sen yakın zamanlayıcı saklamak için bir değişken gerek kapatıp kapatmak için dinleyiciyi mouseenter ve mouseleave olayları için dinleyicileri ayarlayın:

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

Bu benim aradığım şey .. Büyük Teşekkürler .. :-) –

0

bu örneğe bakın lütfen

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>

Ve şimdi fare o div olacak zaman sadece bunu sizin iletişim

Bir yakın zaman tetiklediğini burada herhangi bir kod göremiyorum
İlgili konular