【问题标题】:Loading a complete HTML Page in Modal Box在模态框中加载一个完整的 HTML 页面
【发布时间】:2014-03-02 20:07:21
【问题描述】:

好的,现在几乎是在搜索模态框以在模态框中显示完整的 .HTML 文件而不是在新窗口或标签中打开它。

更准确地说:

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

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

如何通过锚标签实现?

我进行了彻底的搜索,但除了 one(Example#4) 之外没有找到好的解决方案。这在现场有效,但在我下载时不起作用。

.

P.S:我不想使用 iframe

【问题讨论】:

    标签: javascript jquery html modal-dialog modalpopupextender


    【解决方案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,因此我无法将其放入小提琴中,因为没有本地文件可供使用。

    【讨论】:

    • data$.post() 请求返回的内容。它不必被称为数据,但这就是我使用的。你可以做$.post("ajax.html", function(sugar){});,它仍然可以工作。因此 data 本质上包含“ajax.html”的内容,因为它是一个 HTML 文件。如果您要发布到 PHP 页面,它将是 PHP 页面回显的任何内容,包括 echo 调用、var_dumps、错误和 HTML。
    • 无论您希望他们成为什么样的人。它可能是空的。
    【解决方案2】:

    您可以将引导程序用于您想做的事情。

    http://getbootstrap.com/javascript/

    查看模态部分。

    【讨论】:

    • 如果您指的是 Bootstrap 的远程模式选项,它们会在您链接到的页面上明确说明:“此选项自 v3.3.0 起已弃用,将在 v4 中删除。我们建议改为使用客户端模板或数据绑定框架,或自己调用 jQuery.load。”
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-29
    • 2013-05-12
    • 2020-08-11
    • 2013-09-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多