Looking for a solution to ensure that the datetimepicker stays in place when a user scrolls, even after opening the Modal backdrop with the "Open" button? The challenge lies in maintaining the position fixed for the modal while preventing the datetimepicker from moving along with page scrolling. Make sure to keep .modal { position:fixed;} intact to ensure the Modal backdrop extends properly across the page. For a clearer understanding of the issue, consider viewing the Code Snippet in full view.
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
.modal {
display: none;
position:fixed;
z-index: 1;
padding-top: 100px;
left: 0px;
top: 0px;
width: 100%;
max-height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background: linear-gradient(-45deg, #89f7fe 0%, #66a6ff 60%, #23A6D5, #23D5AB);
margin:auto;
padding: 20px;
border: 1px solid #888;
width: 600px;
height: 600px;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.daterangepicker select {
display: inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="css/couponsexample.css" rel="stylesheet">
<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="card shadow mb-4">
<div class="card-header py-3">
<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
<button class="buttonTest" id="myBtn">Open</button>
</span>
</div>
<div class="card-body">
<div id="myModal" class="modal">
<div class="modal-content">
<form id="msform">
<span class="close">×</span>
<fieldset>
<h3 class="fs-subtitle">Step 4</h3>
<input type="text" name="datetimes" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="couponsjs.js"></script>
</body>
</html>