根据条件自动打开模态

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