JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<button class="btn btn-success btn-lg animate-btn" data-toggle="modal" data-target="#myModal">ВЫЗОВИ МАСТЕРА СЕЙЧАС</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Не нашли что искали?</h4>
      </div>
      <div class="modal-body">
       <span>аываываыва</span>
      </div>
    </div>
  </div>
</div>
<script>
// Через сколько событие модал
var limit = 5000;
// Сбросить данные в localStorage через...
var repeat = 300000;

// При переходе на новую страницу проверяем данные и сбрасываем при необходимости
if (Date.now() - localStorage.getItem('count') > repeat) {
    localStorage.removeItem('count');
    localStorage.removeItem('show');
    console.log('Данные в localStorage сброшены');
};

// Если это первое посещение, то запукает отсчет для события модал
if (localStorage.getItem('count') === null && localStorage.getItem('show') === null) {
    localStorage.setItem('count', Date.now());
    localStorage.setItem('show', 'false');
    
    console.log('Счетчик установлен');
    
    var timer = setInterval( function() {
        var time = localStorage.getItem('count');
        if (Date.now() - time > limit ) {
            console.log('Событие модал');
      $('[data-target="#myModal"]').trigger('click');
            localStorage.setItem('show', 'false');
            
            clearInterval(timer);
        };
    }, 500 );
} else {
    console.log('Событие модал уже было');
}
</script>