When you click a button with jQuery, I am generating a modal (Bootstrap modal) as a string. This modal has two option classes: Call Today and Call Tomorrow, which seems fine so far.
Upon clicking the button, the modal is created, prompting me to add two attributes to the button: data-open-hours and data-closed-hours. To illustrate what I intend to do, here's an example:
For instance:
My data-open-hours is : 09:00
And my data-closed-hours is : 22:00
Then, populate my .when-call select from 09:00 to 22:00 with the option Call Now.
If you choose Call Tomorrow, then populate the select from 09:00 to 22:00 without including the string Call Now.
Check out my working example below:
// JavaScript function to create agency modal
function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
console.log("Open: " + openHours + ", Closed hours: " + closedHours);
var html =
'<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
html = html + '<div class="modal-body">';
html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6"><select class="form-control"><option class="call-now">Call Now</option></select></div></div>';
html = html + '</div></div></div></div>';
// Append HTML if not added before
!$(".agencyModal").length && $(document.body).append(html);
$(".agencyModal").modal();
}
// Event listener for opening agency modal on button click
$(document).on("click", ".open-agency", function() {
var openHours = $(this).data("open-hours");
var closedHours = $(this).data("closed-hours");
agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});// CSS styling for the open-agency button
.open-agency {
border: 3px solid #ccc;
display: inline-block;
padding: 12px;
font-size: 14px;
margin: 100px;
cursor: pointer;
box-shadow: 0px 0px 10px #ccc;
}
.open-agency:hover {
background: #050505;
color: #fff;
border-color: #000;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>