I am having trouble with displaying the calendar on a popup. I have created the popup and want to show the calendar within it. I've tried implementing the code but the calendar is not showing up. Any assistance would be greatly appreciated. Please check the URL - you'll find the Popup option, click on that to display the popup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Sirius Sport</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#popupBoxThreePosition{
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none;
}
.popupBoxWrapper{
width: 70%;height: 100%; margin: 50px auto; text-align: left;
}
.popupBoxContent{
background-color: #FFF; padding: 15px;
}
</style>
</head>
<body>
<!--Section2-->
<section>
<div id="content_1" class="content">
<div class="col-md-6">
<div class="post2">
<div class="box">
<div id="wrapper">
<p><a href="javascript:void(0)" onclick="toggle_visibility('popupBoxThreePosition');"><h4>Popup</h4></a> </p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End Section2-->
<!-- Popup content -->
<div id="popupBoxThreePosition">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<div class="row">
<div class="col-xs-6 col-md-4">
</div>
</div>
<div id="datepicker"></div><!-- calender-->
<p><a href="javascript:void(0)" onclick="toggle_visibility('popupBoxThreePosition');"><h5>Close</h5></a></p>
</div>
</div>
</div>
<!--End Popup-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/popup.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/viewportchecker.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.post').addClass("hidden1").viewportChecker({
classToAdd: 'visible animated slideInLeft', // Class to add to the elements when they are visible
offset: 100
});
});
jQuery(document).ready(function() {
jQuery('.post2').addClass("hidden1").viewportChecker({
classToAdd: 'visible animated slideInRight', // Class to add to the elements when they are visible
offset: 100
});
});
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
$( "#datepicker" ).datepicker();
</script>
</body>
</html>