在模态框中加载完整的HTML页面

Question

好的，现在已经花了一天时间搜索关于如何在模态框中显示完整的.HTML文件而不是在新窗口或选项卡中打开它。

更具体地说：

<a href="ajax.html" rel="modal:open">example</a>

这个 ajax.html 文件应该在同一个窗口的“模态框”中打开。

如何通过锚标签实现？

我已经彻底搜索了，但是除了这个方案（示例＃4）之外，没有找到更好的解决方法。它在网站上可以正常工作，但下载后无法使用。

.

附注：我不想使用 iframe 。

- Faisal Ashfaq

Answer 1

使用几种方法可以实现此目的，但最好的方式是使用jQuery向该页面发送AJAX请求：

$.post("ajax.html", function(data){

    $("#myModalDiv").html(data).fadeIn();

});

然后将其绑定到你的锚点，给它分配一个ID，并在你的$(document).ready()中执行以下操作：

$(document).ready(function(){

    $("a#someId").on("click", function(){
        
        //Put the code from above here.

    });

});

---

请注意，这仅适用于在相同域上的文件。

如果您想要使用不同域上的文件，则必须使用 iframe。因此，我无法将其放入 fiddle 中，因为 fiddle 上没有本地文件可供使用。

- Liftoff

---

data 是由 $.post() 请求返回的内容。它不一定要被称为 data，但这是我使用的名称。你可以这样做 $.post("ajax.html", function(sugar){}); 它仍然可以工作。因此，data 实质上包含了 "ajax.html" 的内容，因为它是一个 HTML 文件。如果您要发布到 PHP 页面，则将是 PHP 页面所回显的任何内容，包括 echo 调用、var_dumps、错误和 HTML。 - Liftoff

无论你想让它们成为什么，它们都可以是空的。 - Liftoff

Answer 2

你可以使用Bootstrap来完成你想做的事情。

http://getbootstrap.com/javascript/

请查看模态框部分。

- isank-a

---

如果你指的是Bootstrap模态框的远程选项，他们在你链接的页面上明确说明：“自v3.3.0起，此选项已被弃用，并将在v4中删除。我们建议改用客户端模板或数据绑定框架，或自己调用jQuery.load。” - jimiayler