Stop setTimeout bootstrap modal on mouse hover

Question

i would ask about something a litle bit hard for me because im not very stronge with JS/JQ,

i create modal using bootstrap 4, & 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 out side modal, settime out 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));
    });
});

sorry for disturbing you, but no other better than you :)

You can see this post: https://stackoverflow.com/questions/12343695/make-bootstrap-popover-appear-disappear-on-hover-instead-of-click — AleKennedy, Jan 07 '19 at 20:56
@AleKennedy thanks for your reply, but it's not what im looking for, sounds in the demos looks like tooltip, what im looking for include the modal once its open i want when mouse in side the settimeout STOP, than when mouse out again settimeout work to close the modal :) could you add the code to me — Romer, Jan 07 '19 at 21:01

Nino Filiu · Answer 1 · 2019-01-07T22:08:36.217

Use setInterval to increment the time spent not minding the modal:

let beforeClose;
let mouseIn=false;
const openModal = () => {
  document.querySelector('#modal').style.display='block';
  beforeClose = 100;
  let int = setInterval(() => {
    document.querySelector('#countdown').innerHTML = beforeClose;
    if (!mouseIn) beforeClose--;
    if (beforeClose==0) {
      closeModal()
      clearInterval(int);
    }
  }, 1000/24);
}
const closeModal = () => document.querySelector('#modal').style.display='none';

#modal {
  border: 1px solid black;
  display: none;
}

<button onclick="openModal()">Open modal</button>

<br>

<div id="modal" onmouseover="mouseIn=true" onmouseout="mouseIn=false">
  <p>
    Closing the modal at 0 : <span id="countdown"></span>
  </p>
  <p>
    Hover me to pause the countdown
  </p>
</div>

(I used a div instead of a modal, but under the hood it's the same)

i swear what you did is exactly what im looking for, but i try to add what you showed me but didn't work & there's issue after the countdown finish and modal close try to click one more time, the time will start again with ( -0 , -1 , -2 etc.. ) check here my code http://jsfiddle.net/dbawtgfh/ — Romer, Jan 07 '19 at 21:31
Edited m answer to correct the bug. Please upvote and accept if that answer is fine! — Nino Filiu, Jan 07 '19 at 22:08

score 0 · Accepted Answer · answered Jan 07 '19 at 21:23

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));

    });

});

Stop setTimeout bootstrap modal on mouse hover

2 Answers2