Automatic pop up window alert box or bootstarp modal alert box based on Timing setting

Question

Hi guys am facing with the problem that I need a pop-up alert box window to raise automatically every day at morning 9:30 am and it should end at 11:30 am in the morning and again afternoon it should raise at 1:30 am to 2:30 add attendance of students.I tried but I have not able to set the timings according to our server timing .please see my code and help me guys and a huge appreciation for them.

<div class="modal fade" id="overlay"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal aria-hidden="true">&times;</button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>Context here</p>
  </div>
</div>

<script>$('#overlay').modal('show');setTimeout(function() {
$('#overlay').modal('hide');}, 5000);

Answer 1

Since it's longer than a comment i have to post it here,

Let me explain it this way. you need few things before you can get your modal shown on specific time. When you load a page and when your code reaches the line that you have Date() function it will log that moment of time and that's where it stops.

And that's where you need some sort of live updating time so that you get live time. for this instance that's why i said you can use library like moment.js .

I'll give you both options here: (Vanilla)

 function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = h + ":" + m + ":" + s;
}

setInterval(time, 1000);

setInterval runs the time function every 1 seconds (1000 milliseconds).

to have your function act the way you want you can have an if statement on specific hour and then trigger your modal based on that. and hide it after certain time.

for your if condition you can write it like this :

if(d.getHours() == 9 && d.getMinutes() = 30){
  //show modal
}

https://jsfiddle.net/xpvt214o/698686/