Creating a full screen popup window and updating the scroll bar

Question

I want to create a full screen window using CSS, I have seen this question.

My problem is that my full screen window is quite long, and I get a scroll bar inside the main page... would be possible create a full screen window in such a way that I see only one scroll bar? (i.e. use the main scroll bar for the full screen window when it is open)

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>

Adding class on body tag with overflow: hidden when popup opens solve the problem i guess — gowtham rajan, Mar 23 '19 at 02:12
@gowthamrajan: thanks a lot, that's a good solution... I just wait to see if I get any other alternatives. — Hooman Bahreini, Mar 23 '19 at 02:16

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

From a logical perspective

this is a dynamic process, body has a scroll bar, and Full Screen has a scroll bar, you want to hide body scroll bar when Full Screen show. So there's a lot of solutions, I just give an example:

set basic style:

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

change body scrollbar when Full Screen show

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

From the perspective of implementation

This is a very common requirement, No matter if your modal are full screen or not, each alert modal in our website has this feature. There are big amounts of libraries to do that, such as:

Bootstrapcss style framework but also has some very practical JS component

Ant Design which contains a variety of components.

SweetAlert2 which focus on the alert component,

They have better compatibility and style for this, you can try that

Creating a full screen popup window and updating the scroll bar

1 Answers1