Question

我遇到一种情况，当用户单击“打开”按钮时，模态背景打开，并允许datetimepicker下拉。我如何保持它以便用户“滚动”时，datetimepicker“停留”在其位置，而不随着页面滚动而移动？我需要保持.modal { position:fixed;}不变，否则Modal背景幕将不会扩展整个页面（您可能必须以完整的视图查看代码段，以查看发生了什么。）

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">&times;</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>

Answer 1

日期选择器具有类“ .daterangepicker”，其默认位置是绝对位置。将其替换为fixed并添加！important，以便它不会被datepicker库覆盖。

.daterangepicker { position: fixed !important; }

您可能需要相应地调整顶部和左侧。现在，数据选择器保持在固定位置，即使滚动页面也不会移动。

背景模态和下拉菜单冲突

1 个答案: