如何使用Jquery在页面内打开一个HTML弹出窗口（不会打开新窗口）

Question

我有一个链接按钮，当我点击这个链接按钮时，弹出窗口会打开（在页面内部，就像模态弹出窗口一样）。现在我需要使用jQuery来实现弹出窗口的效果，并且在div中显示来自数据库的文本内容。如何从后端获取信息呢？

意思是使用jQuery打开一个具有模态弹出窗口效果的div

或者使用jQuery在同一窗口中打开HTML页面作为弹出窗口

谢谢和问候 Vara Prasad.M

- Vara Prasad.M

Answer 1

看一下Facebox jQuery插件。它几乎完全符合您的要求。例如，您可以像这样拥有一个链接到某个远程页面

<a href="remote.html" rel="facebox">text</a>

当你的内容加载完成后，只需调用facebox插件，如下所示。

jQuery(document).ready(function($) {
    $('a[rel*=facebox]').facebox()
});

你的内容将显示在一个模态窗口中。你还可以看一下Fancybox 或者 ThickBox，它们提供非常相似的功能。

- Roman

---

非常感谢，我已经得到了答案。 - Vara Prasad.M

Answer 2

你的问题有两个步骤：

1. 使用jQuery打开一个模态弹出框
2. 获取服务器端内容并在模态对话框中显示

使用jQuery Dialog（http://docs.jquery.com/UI/Dialog）来打开模态对话框，然后使用jQuery load（http://api.jquery.com/load/）来从服务器加载内容。

你调用的服务器页面将进行数据库查询并将内容输出到响应缓冲区。

- Michael Shimmins