Автоматическое открытие модального окна при условии

Question

Я интегрировал модальную материализацию по умолчанию, но я хотел бы интегрировать условие открытия в свою модальную форму. У меня есть обратный отсчет в моем приложении, и когда этот обратный отсчет дойдет до xx минут, я должен автоматически показать свое модальное окно. Спасибо

Я взял эту простую модель из Modal при материализации

  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

Мой обратный отсчет основан на этой модели:

<script type="text/javascript">
        countdownManager = {
            // Configuration
            targetTime: new Date('July 24 10:40:00 2020'), // Target date of the counter. Please fill in the end date and time completely
            displayElement: { 
                hour: null,
                min:  null,
                sec:  null
            },
            // Initialization of the countdown (to be called 1 time when the page loads)
            init: function(){
               
                this.displayElement.hour = jQuery('#countdown_hour');
                this.displayElement.min  = jQuery('#countdown_min');
                this.displayElement.sec  = jQuery('#countdown_sec');
                // Launch of the countdown
                this.tick(); // 
                window.setInterval("countdownManager.tick();", 1000); // Next ticks, repeated every second (1000 ms)
            },
            // Updates the countdown (clock tick)
            tick: function(){
                // Present time
                var timeNow  = new Date();
                console.log(timeNow);
                // We make sure that the remaining time is never negative (which is the case in the future of targetTime)
                if( timeNow > this.targetTime ){
                    timeNow = this.targetTime;
                }
                // Calculation of remaining time
                var diff = this.dateDiff(timeNow, this.targetTime);
                // this.displayElement.day.text(  diff.day  );
                this.displayElement.hour.text( diff.hour );
                this.displayElement.min.text(  diff.min  );
                this.displayElement.sec.text(  diff.sec  );
            },
            // Calculate the difference between 2 dates, in day / hour / minute / second
            dateDiff: function(date1, date2){
                var diff = {}                           
                var tmp = date2 - date1;
                tmp = Math.floor(tmp/1000);             
                diff.sec = tmp % 60;                    
                tmp = Math.floor((tmp-diff.sec)/60);    
                diff.min = tmp % 60;                    
                tmp = Math.floor((tmp-diff.min)/60);    
                diff.hour = tmp % 24;                   
                return diff;
            }
        };
        jQuery(function($){
            // Launch of the countdown when loading the page on the server side
            countdownManager.init();
        });
    </script>

Answer 1

Используйте метод open для открытия любого модального окна:

$('#modal1').modal('open');

https://materializecss.com/modals.html