Utrzymuj okno dialogowe JQuery otwarte na unicie myszy

Chcę wyświetlić powiadomienie na stronie wzorcowej i do tego używam okna dialogowego JQuery. Mogłem uzyskać automatyczne pokazywanie i ukrywanie się przy ładowaniu strony, używając poniższego kodu. Ale chcę zachować otwarte okno dialogowe, jeśli jest ono zawieszone przez Mysz.Utrzymuj okno dialogowe JQuery otwarte na unicie myszy

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

});

Ta operacja jest dobra, ale ukrywa okno dialogowe, nawet jeśli umieścę kursor div #dialog. Chcę zachować otwarte okno dialogowe, jeśli się unosi.

Źródło

2016-04-27 Bharat Sisode

Nie widzę tu żadnego kodu, który jest zamykany po wyzwalania najedziesz kursorem na okno dialogowe. Czy na pewno cały kod jest tutaj? –

@Danny H .. Tak, cały kod jest tutaj. Okno dialogowe zdarzenia zamknięcia jest zapisane w samym zdarzeniu Open. –

Natychmiastowe wywołanie funkcji zamykania po wyświetleniu okna dialogowego. Nie możesz tego zatrzymać w ten sposób. Możesz tylko zamknąć timer, zatrzymać timer po najechaniu kursorem i ponownie uruchomić, gdy mysz opuści okno dialogowe.

Trzeba zmiennej do przechowywania ścisły Timer:

var dialogCloseTimer = null;

W konfiguracji dialogowym rozpocząć ścisłą licznik z 1 sekundę (1000 ms):

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

Po skonfigurowaniu okno , ustaw detektory dla zdarzeń mouseenter i , aby zatrzymać i ponownie uruchomić timer zamykania:

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

Źródło

2016-04-27 13:57:25 aorcsik

Tego właśnie szukałem .. Wielkie dzięki .. :-) –

Proszę zobaczyć ten przykład

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>

A teraz, gdy mysz będzie na tym dział tylko zrobić swoje dialogowe

Źródło

2016-04-27 14:21:44 Nicholas

Utrzymuj okno dialogowe JQuery otwarte na unicie myszy

Odpowiedz

Powiązane problemy