创建全屏弹出窗口并更新滚动条

Question

我想用CSS创建一个全屏窗口，我见过this question。

我的问题是我的全屏窗口很长，我在主页面内有一个滚动条...可以创建一个全屏窗口，这样我只能看到一个滚动条？（即打开时使用主滚动条作为全屏窗口）

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>

Answer 1

从逻辑的角度来看

这是一个动态过程，body有一个滚动条，Full Screen有一个滚动条，你想在body显示时隐藏Full Screen滚动条。所以有很多解决方案，我举一个例子：

设置基本风格：

    html, body {
      height: 100vh;
      width: 100vw;
    }

当Full Screen显示时改变身体滚动条

function toggleWindow() {
  $('.fullScreenWindow').toggleClass('show');
  $('body').css({"overflow": "hidden"})
}

从实施的角度来看

这是一个非常常见的要求，无论您的模态是否全屏，我们网站中的每个警报模式都具有此功能。有大量的库可以做到这一点，例如：

Bootstrapcss样式框架还具有一些非常实用的JS组件

Ant Design含有多种成分。

SweetAlert2专注于警报组件，

他们有更好的兼容性和风格，你可以尝试

创建全屏弹出窗口并更新滚动条

问题描述投票：1回答：1

1个回答

最新问题

创建全屏弹出窗口并更新滚动条

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1