Issue
I create modal using Bootstrap 4 and in backend I add settimeout to close the modal after X secounds.
But if the user didn't finish reading that modal, this is my main goal: I want to stop the settimeout once the mouse inside the modal & again if the mouse outside modal, settimeout again work to finish the event.
My code:
$(function(){
$('#mymodal').on('show.bs.modal', function(){
var myModal = $(this);
clearTimeout(myModal.data('hideInterval'));
myModal.data('hideInterval', setTimeout(function(){
myModal.modal('hide');
}, 3000));
});
});
Solution
monitor mouseover of modal-content
$(function(){
$('#mymodal').on('show.bs.modal', function(){
var myModal = $(this);
clearTimeout(myModal.data('hideInterval'));
$('.modal-content', myModal).on('mouseover', function() {
clearTimeout(myModal.data('hideInterval'));
});
$('.modal-content', myModal).on('mouseout', function() {
myModal.data('hideInterval', setTimeout(function(){
myModal.modal('hide');
}, 3000));
});
myModal.data('hideInterval', setTimeout(function(){
myModal.modal('hide');
}, 3000));
});
});
Answered By - David Bray
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.