Question

<div class="modal hide fade" id="modal_window">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

这是我的HTML代码，

我想加载一个远程内容，比如yahoo.com

我试过

$('#modal_window').attr('data-remote', 'http://www.yahoo.com').modal({show:true, remote:true});

它显示了正常的模态内容，而不是加载到模态中的雅虎。如何将yahoo.com加载到模态窗口中？

http://jsfiddle.net/UXU2K/1/

由于

Answer 1

通过Javascript加载远程数据的两种方法是从AJAX或通过设置iFrame的url。 iFrame适用于您要加载整个网站的时间。我假设你不想要那个。你正在使用jQuery，所以这里是他们的ajax方法http://api.jquery.com/jQuery.ajax/的文档。

以下是使用jQuery的ajax方法加载远程数据的代码：

    $.ajax({

       url: 'http://www.yahoo.com',
       type: 'GET',
       success: function(data) {

          $('#modal_body').append(html);

       }

    });

顺便说一句，如果你要加载HTML（与纯文本相对）并想将其注入modal_win元素，请在success方法中使用以下代码而不是我上面的代码：

$(html).appendTo('#modal_body');

Answer 2

由于您正在设置数据属性，因此传入remote: true语法无效。如果删除它，您将看到此错误：

XMLHttpRequest无法加载http://www.yahoo.com/。 Access-Control-Allow-Origin不允许原点http://fiddle.jshell.net。

如果网页与您的网站位于同一个域中，则会有效。否则，您将需要使用iFrame，但这取决于您的应用程序。

Twitter Bootstrap以编程方式打开远程URL

2 个答案: