JavaScript 在网页中央弹出一个 div 元素

Tahseen Tauseef 2023年1月30日 2022年5月10日
  1. 什么是弹出窗口
  2. 样式化弹出窗口
  3. 在 JavaScript 中打开和关闭弹出窗口
  4. 使用 jQuery 打开和关闭弹出窗口
JavaScript 在网页中央弹出一个 div 元素

本教程将解决如何在网页中央打开一个弹出窗口。首先,我们有以下查询要在本文中解决:

  • 什么是弹出窗口
  • 设计一个弹出窗口
  • 在 JavaScript 中打开和关闭弹出窗口
  • 使用 jQuery 打开和关闭弹出窗口

什么是弹出窗口

弹出窗口是在底层内容之上的窗口上打开的小窗口或小框。

使用弹出窗口的主要用例是关注某些信息而不是整个内容,提示用户确认。或者,弹出窗口也称为模态框。

样式化弹出窗口

弹出窗口的样式很重要,唯一的原因是你希望它显示在主要内容之上,或者至少需要给人一种它在主要内容之上的错觉。我们将通过以下示例了解如何执行此操作:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        height: 100%;
      }
      .overlay {
        position: absolute;
        display: none;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 2;
      }

      .popup {
        position: absolute;
        width: 50%;
        height: 50%;
        top: 25%;
        left: 25%;
        text-align: center;
        background: white;
      }
     
      .popup h3 {
        font-size: 15px;
        height: 50px;
        line-height: 50px;
        color: black;
      }
      .CloseIcon{
        cursor: pointer;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="overlay" id="overlay">
      <div class="popup">
        <div onclick="CloseModal()" class="CloseIcon">&#10006;</div>
        <h3>Popup Content</h3>
      </div>
    </div>
    <button onclick="OpenModal()">Show PopUp</button>
  </body>
</html>

在这个简单的示例中,我们创建了一个显示弹出窗口的按钮。但最重要的是,我们有一个 overlay 元素,它会在所有内容之上以浅黑色显示,从而使用户难以看到该内容。

然后我们创建了一个 popup 元素并将其设置为位于 overlay 元素和网页中央的上方。在这样做的过程中,我们设法隐藏了主要内容。

当一个弹出窗口在屏幕中间打开时,它会引起用户的注意,因为这是用户唯一能清楚看到的东西。但是 overlay 元素被设置为 none,所以它现在不显示。

问题是,我们如何切换弹出窗口?我们可以通过使用 JavaScript 或 jQuery 来做到这一点。让我们在下面详细讨论两者。

在 JavaScript 中打开和关闭弹出窗口

我们可以使用 JavaScript 来切换弹出样式属性;我们可以通过访问 DOM 元素及其 style 属性并将 display 类型从 none 更改为 block 来做到这一点,这将使弹出窗口出现。

同样,一旦用户单击关闭图标,我们就可以改回 none。让我们用一个例子来说明这一点。

function OpenModal() {
  let element = document.getElementById('overlay')
  element.style.display = 'block'
}
function CloseModal() {
  let element = document.getElementById('overlay')
  element.style.display = 'none'
}

使用 jQuery 打开和关闭弹出窗口

或者,我们可以用 jQuery 重复同样的事情。让我们看一下源代码和所需的更改。

function OpenModal() {
	 $('#overlay').show();
}
function CloseModal() {
	 $('#overlay').hide();
}

在这个例子中,我们使用了 showhide jQuery 方法。不是将 display 的属性从 none 更改为 blockshow 删除 element 上的 display 属性,类似地,hidedisplay 属性设置为 none .

注意
show 仅适用于 display:none 或 jQuery 隐藏的项目;它不适用于 CSS 的 visibility 属性。

此外,使用 jQuery 时,请务必在标头中添加 jQuery CDN(或安装 jQuery 包)。