Создание полноэкранного всплывающего окна и обновление полосы прокрутки - PullRequest
Новая
       2

Создание полноэкранного всплывающего окна и обновление полосы прокрутки

1 голос
/ 23 марта 2019

Я хочу создать полноэкранное окно с использованием CSS, я видел этот вопрос .

Моя проблема в том, что мое полноэкранное окно довольно длинное, и я получаю полосу прокруткивнутри главной страницы ... можно было бы создать полноэкранное окно таким образом, чтобы я видел только одну полосу прокрутки?(т.е. используйте основную полосу прокрутки для полноэкранного окна, когда оно открыто) 

function toggleWindow() {
  $('.fullScreenWindow').toggleClass('show');
}
.fullScreenWindow {
  display: none;
}

.fullScreenWindow.show {
  background-color: lightgrey;
  display: block;
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <button onclick="toggleWindow();">toggle window</button>
  <div class="fullScreenWindow">
    <br/><br/>
    <h1> full screen window start</h1>
    <br/><br/><br/><br/><br/><br/><br/><br/>
    <h3>getting 2 scroll bars</h3>
    <br/><br/><br/><br/><br/><br/><br/><br/>
    <button onclick="toggleWindow();">close</button>
    <h1> full screen window end</h1>
    <br/><br/>
  </div>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
</body>
</html>

1 Ответ

1 голос
/ 23 марта 2019

С логической точки зрения

это динамический процесс, body имеет полосу прокрутки, а Full Screen имеет полосу прокрутки, вы хотите скрыть полосу прокрутки body, когда отображается Full Screen. Так что есть много решений, я просто приведу пример:

  1. установить базовый стиль: 
    html, body {
      height: 100vh;
      width: 100vw;
    }
  1. изменить полосу прокрутки тела, когда Full Screen показать 
function toggleWindow() {
  $('.fullScreenWindow').toggleClass('show');
  $('body').css({"overflow": "hidden"})
}

С точки зрения реализации

Это очень распространенное требование. Независимо от того, является ли ваш модальный полноэкранный режим, у каждого модального оповещения на нашем сайте есть эта функция. Для этого существует большое количество библиотек, таких как:

Bootstrap фреймворк в стиле CSS, но также имеет несколько очень практичных компонентов JS

Ant Design, который содержит множество компонентов.

SweetAlert2, которые сосредоточены на компоненте оповещения,

У них лучшая совместимость и стиль для этого, вы можете попробовать это

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...