1 
<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ではなく、通常のモーダルコンテンツが表示されます。yahoo.comをモーダルウィンドウにロードするにはどうすればよいですか？

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

ありがとう

4

2 に答える 2

1

Javascriptを介してリモートデータをロードする2つの方法は、AJAXから、またはiFrameのURLを設定することです。iFrameは、Webサイト全体をロードする場合に使用します。私はあなたがそれを望まないと仮定するつもりです。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');

于 2012-10-08T03:35:18.410 に答える
0

remote: trueデータ属性を設定しているため、受け渡しは無効な構文です。削除すると、次のエラーが表示されます。

XMLHttpRequestはhttp://www.yahoo.com/をロードできません。Origin http://fiddle.jshell.netは、Access-Control-Allow-Originでは許可されていません。

ページがサイトと同じドメインにある場合は機能します。それ以外の場合は、iFrameを使用する必要がありますが、アプリケーションによって異なります。

于 2012-10-08T03:47:01.503 に答える