Question

我在单击按钮时启用了覆盖，然后当用户最小化时，屏幕覆盖不会覆盖整个页面。用户可以在最小化屏幕时单击按钮。

我将screen.height和screen.width设置为覆盖div。但是在最小化到某个级别时，按钮仍然可见。 id1是重叠划分的id

document.getElementById("id1").style.height=screen.height;
document.getElementById("id1").style.width=screen.width;

我希望覆盖图显示在整个网页上

Answer 1

好，这是我们创建叠加层的方法。您应该有一个像

这样的父div

<div class="body_wrapper">
  <div class="overlay"></div>
  <div class="page_content">
      <-- You Page Content -->
  </div>
</div>

在<body>标记中，您得到了body_wrapper，在其中获得了overlay和page__content。现在在样式表中：

.body_wrapper {
   position: relative;
}
.overlay {
   position: absolute;
   right: 0;
   top: 0;
   left: 0;
   bottom: 0;
   background: rgba(0,0,0,0.5);
}

Answer 2

screen.height并不总是返回有效的屏幕高度，检查this以获得更多信息。

CSS和一点JavaScript可以完成您的任务。

CSS有两个单位可能是您问题的关键：vw和vh单位。选中此MDN article以获得更多信息。

因此，这是一个演示，演示了如何借助CSS和一些JavaScript进行事件处理来完成任务。

let trigger = document.getElementById('trigger'),
  triggersClose = document.querySelectorAll('.trigger-close'),
  fullScreen = document.getElementById('fullscreen');

/** click event listener for the button to show the overlay **/
trigger.addEventListener('click', e => {
  e.preventDefault();
  fullScreen.classList.add('visible'); /** add .visible class so the overlay is shown **/
});

/** cycle through the buttons that can hide the overlay and add a click event for them **/
triggersClose.forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    fullScreen.classList.remove('visible'); /** remove .visible class so the overlay becomes hidden **/
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.overlay {
  display: none; /** the overlay is initially hidden **/
  position: fixed; /** stays on the same place even when scrolling in the background **/
  width: 100vw; /** vw : viewport width = 1% of the viewport's width. It changes accordingly when zooming (responsive) **/
  height: 100vh; /** vh : viewport height = 1% of the viewport's height. It changes accordingly when zooming (responsive) **/
  top: 0;
  left: 0;
  justify-content: center; /** center the content horizontally **/
  align-items: center; /** center the content vertically **/
  padding: 15px;
  background: rgba(24, 24, 24, .6);
  z-index: 999; /** stays on top **/
}

.overlay.visible {
  /** this class is used by JavaScript to show the overlay **/
  display: flex; /** flex makes our life easier ! **/
}

.overlay .overlay-wrapper {
  display: flex;
  flex-direction: column;
  width: 65%;
  max-height: 100%;
  overflow-y: auto; /** adds scrollbars when the content is too much **/
  background-color: #fff;
}

.overlay .overlay-wrapper .overlay-header {
  position: relative;
  background-color: #1548a6;
}

.overlay .overlay-wrapper .overlay-header>.text,
.overlay .overlay-wrapper .overlay-body {
  padding: 15px 5px;
}

.overlay .overlay-wrapper .overlay-header>.trigger-close {
  position: absolute;
  width: 45px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 1.1rem;
  font-weight: bold;
  border: 0;
  color: #fff;
  background-color: #dc3545;
  cursor: pointer;
  border-top-right-radius: 4px
}

.overlay .overlay-wrapper .overlay-footer>.trigger-close {
  float: right;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 8px 15px;
  color: #fff;
  background-color: #007bff;
  border: 0;
  border-radius: 4px;
}

<button id="trigger">click me !</button>

<div id="fullscreen" class="overlay">
  <div class="overlay-wrapper">
    <div class="overlay-header">
      <h3 class="text">Message heading</h3>
      <button class="trigger-close">&times;</button>
    </div>
    <div class="overlay-body">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In facere fugiat aperiam officiis debitis voluptas soluta assumenda cumque reiciendis blanditiis nostrum, consequuntur vero corporis doloribus! Expedita voluptatem illum maiores culpa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ex temporibus, possimus commodi, obcaecati nostrum maiores cupiditate voluptas voluptate unde qui quasi accusantium earum dolores pariatur fuga. Optio, officia praesentium.</p>
    </div>
    <div class="overlay-footer"><button class="trigger-close">close</button></div>
  </div>
</div>

详细了解flexbox（display: flex）。

希望我进一步推动了你。

screen.height和screen.width没有返回正确的值

2 个答案: