Modal to close online ordering after restaurant closing time

so far I’ve created a modal style div that drops down over the initial page (for testing purposes) but it so far work or is initialised by a button click, however what I’m trying to achieve is to get it to drop down between two times (in other words between the restaurant closing time and the opening time) without refreshing so I’m guessing the use of AJAX to prevent meals being ordering whilst the restaurant is closed. the following is what I’ve got so far but as said its initialised with a button click.

style:

[code]
#alert_backdrop {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=50);
;
display: none;
}

#alert_dialog {
position: fixed;
top: 20%;
left: 30%;
width: 40%;
padding: 20px;
box-sizing: border-box;
background: #FFF;
box-shadow: 0px 0px 2px 2px #6B6B6B;
display: none;
}

#alert_title {
color: #525252;
padding: 0px 0px 5px 5px;
font-weight: bold;
font-size: 18px;
}

#alert_actions {
margin-top: 20px;
text-align: center;
}

#alert_actions button {
padding: 10px 15px;
border: 0;
color: #FFFFFF;
text-transform: uppercase;
cursor: pointer;
-khtml-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

#alert_actions button.blue {
background: #007aff;
}
[/code]

jQuery:

[code]
(function($) {
$.createAlert = function(options) {
$(options.attachAfter).after(
“<div id=’alert_backdrop’></div>” +
“<div id=’alert_dialog’>” +
“<div id=’alert_title’></div>” +
“<div id=’alert_actions’>” +
“<button id=’alert_confirm’></div>” +
“</div>” +
“</div>”
);

$(‘#alert_title’).html(options.title);
$(‘#alert_confirm’).html(options.confirmText);
$(‘#alert_confirm’).addClass(options.confirmStyle);

if (typeof options.callback !== “undefined” && options.callback !== null)
$(‘#alert_confirm’).bind(“click”, options.callback);

$(‘#alert_confirm’).click($.hideAlert);
};
$.showAlert = function() {
$(‘#alert_backdrop’).slideDown();
$(‘#alert_dialog’).delay(100).fadeIn();
};

$.hideAlert = function() {
$(‘#alert_backdrop’).remove();
$(‘#alert_dialog’).remove();
};
})(jQuery);
[/code]

and

[code]
$(‘#trigger’).click(function() {
$.createAlert({
attachAfter: ‘#trigger’,
title: ‘You have reached the limit or your quota!’,
confirmText: ‘Accept’,
confirmStyle: ‘blue’,
callback: null
});
$.showAlert();
});
[/code]

the restaurant closes at 23:00pm and opens at 10:00am and from this I’ve sort put together the following but I’m too sure whether it works and on how to further proceed

[code]
$current_time = .date(“H:i:s”);
$opening_time = “10:00:00”;
$closing_time = “23:00:00”;
$date1 = DateTime::createFromFormat(‘H:i s’, $current_time);
$date2 = DateTime::createFromFormat(‘H:i s’, $opening_time);
$date3 = DateTime::createFromFormat(‘H:i s’, $closing_time);
if ($date1 > $date2 && $date1 < $date3)
{
// call function to drop modal
}
[/code]

any ideas/ corrections/ pointers/ solutions much appreciated

Also in #PHP _↴