如何只使用jQuery（不使用其他插件）创建一个jQuery弹出窗口

Question

我需要知道是否可以仅使用jQuery而不使用其他插件（如Fancybox，Lightbox等）来制作jQuery弹出窗口。

- Rajasekar

Answer 1

您可以像这样做：

您可以这样做：

var mywin = window.open("", "my_popup", "location=0,status=0,scrollbars=0,width=500,height=500");
var contents = "HTML content...";
$(mywin.document.body).html(contents);

- István Ujj-Mészáros

Answer 2

基本上，我认为你所说的弹出窗口样式只是一个绝对定位的元素，其z-index比页面上其他任何元素都要高：

$("<div style='z-index: 100; position: absolute; left: 100px; top: 100px; background-color: #ecc; border: 1px solid black'>Hi there</div>").appendTo(document.body);

点击此处查看实例

这些插件可能会为您提供许多有用的功能，包括：

• 在弹出窗口后面提供“垫片”，以防止其他地方的点击（如果您希望弹出窗口是模态的）。
• 使用iframe作为垫片，以便Flash动画和基于操作系统的表单控件不会显示在您的弹出窗口顶部（尽管它们应该在z顺序中较低），因为Certain Browsers存在问题。
• 提供内置的关闭弹出窗口的方法（关闭框，Esc键等）
• 提供自动居中

等等。但是，如果您有充分的理由重新发明轮子（有时确实是这样），上述内容应该能够让您开始工作。

- T.J. Crowder

Answer 3

是的，你可以。唯一的问题是你是否需要重新发明轮子。

要打开一个弹出窗口，只需按照以下步骤操作：

1. 创建一个充当弹出窗口的元素并隐藏它（绝对定位，更高的 z-index）。 2. 编写显示元素在所需位置的代码。 3. 为弹出窗口编写关闭方法（大多数插件都有不同的选项；你可以点击关闭按钮或使用 Esc 键）。

如果你希望背景被禁用，则必须创建另一个元素并设置透明度。如果你希望所有选择框和 iframe 都在弹出窗口下方（对于 IE6），则必须在覆盖层元素中使用嵌入式 iframe。

- rahul

Answer 4

为什么不使用Jquery API？ http://docs.jquery.com/UI/Dialog

- Tyde

---

jQuery UI 是建立在 jQuery 之上的额外层，不是它的一部分。显然，OP 希望除了基本的 jquery.js 之外不使用其他任何东西。 - T.J. Crowder