Фон модальный и выпадающее меню конфликт - PullRequest
Новая
       62

Фон модальный и выпадающее меню конфликт

0 голосов
/ 09 июля 2019

У меня есть ситуация, когда пользователь нажимает кнопку «Открыть», модальный фон открывается и позволяет выпадающему выбору даты и времени.Как сделать так, чтобы когда пользователь «прокручивал», средство выбора даты и времени «оставалось» на своем месте и не двигалось при прокрутке страницы?Мне нужно сохранить .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">&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>

1 Ответ

1 голос
/ 09 июля 2019

Средство выбора даты имеет класс ".daterangepicker", по умолчанию оно имеет абсолютную позицию. Замените его на fixed & add! Важный, чтобы он не был переопределен библиотекой datepicker.

.daterangepicker { position: fixed !important; }

Возможно, вам придется отрегулировать верхнюю часть слева соответственно. Теперь сборщик данных остается в своем фиксированном положении и не будет двигаться даже при прокрутке страницы.

...