html - 背景模态和下拉菜单冲突
问题描述
我有一种情况,当用户单击“打开”按钮时,模态背景会打开并允许 datetimepicker 下拉。我如何保持它,以便当用户“滚动”时,日期时间选择器“停留”在它的位置而不随着页面滚动而移动?我需要保持.modal { position:fixed;}
原样,否则模态背景不会扩展整个页面(您可能必须完整查看代码片段才能确切了解发生了什么)。
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" />
</div>
</fieldset>
</form>
</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>
解决方案
日期选择器有一个类 ".daterangepicker" ,它的默认位置是绝对的。将其替换为 fixed 并添加 !important 以便它不会被 datepicker 库覆盖。
.daterangepicker {
position: fixed !important;
}
您可能需要相应地调整顶部,左侧。现在数据选择器保持在其固定位置,即使页面滚动也不会移动。
推荐阅读
- database - 无法在多节点 TimescaleDB 设置上创建分布式超表
- r - 有没有办法在 R 中使用 spatstat 创建 ppp 对象列表?
- python - 如何计算 Pytorch 中的平均相对绝对误差
- python - 如何使用 C# 调用 Python 3.9 脚本
- r - R如何在运行长度中保存唯一值的同时删除重复值
- html - 无法单击 selenium webdriver java 中行或网格中存在的费用类型下拉框
- r - 将符号向量转换为“...”的输入
- html - flutter webview 不允许我在任何端口上打开 localhost
- angular - 重定向到同一页面后如何显示以前的输入文本
- java - 使用带有 twitter4j 的 java 应用程序发布推文时出现连接超时