如何使用 jQuery 和 CSS 创建一个简单的弹出窗口？

如何使用 jQuery 显示简单的弹出窗口

在 Web 开发中，显示弹出窗口可以增强用户交互性。在本文中，我们将探索如何使用 jQuery 创建一个包含标签和输入字段的简单弹出窗口。

问题：

考虑您想要的情况单击 ID 为“mail”的元素时显示弹出窗口。此弹出窗口应包含一个带有文本“电子邮件”的标签和相应的文本框。

解决方案：

要使用 jQuery 创建一个简单的弹出窗口，我们将结合 CSS 和 JavaScript。让我们分解一下：

CSS：

首先，让我们定义弹出窗口的 CSS 样式：

.pop {
//... CSS code here...
}

JavaScript：

接下来，我们将创建 jQuery功能：

$("#contact").on('click', function() {
    //... jQuery code here...
});

HTML：

最后，我们需要为弹出窗口定义 HTML 标记以及触发它的元素：

<div> <p><strong>其他注意事项：</strong></p>
<p>对于增强的用户体验，您可以在弹出窗口中加入动画。此外，如果弹出内容较多，请考虑通过 AJAX 加载它以最大程度地减少延迟。</p>
<p><strong>示例实现：</strong></p>
<p>下面是解决方案的完整示例实现提供：</p>
<p><strong>CSS：</strong></p>
<pre class="brush:php;toolbar:false">.pop {
  display: none;
  position: absolute;
  z-index: 1000;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}

JavaScript：

$("#contact").on('click', function() {
  $(".pop").toggle();
});

HTML：

<div><p>此实现允许简单且响应迅速单击“联系我们”链接时将显示弹出窗口。</p></div>