21

必要なのは、リモート コンテンツを Twitter Bootstrap モーダル ウィンドウで開く方法の簡単な例だけです。

Bootstrap v2.0.4 を使用していますが、うまく動作しません。通常のモーダル ウィンドウを開くことはできますが、その中にあるリモート ファイルを開くことはできません。

4

2 に答える 2

23

まず、リモート データは同じオリジン ポリシーを満たす必要があります。それが満足できない場合、これ以降はすべて失敗します (外部 URL を読み込もうとしている場合は、Twitter Bootstrap 外部 URL が機能しないを参照してください)。

Bootstrap data-api を使用してリモート コンテンツをモーダルにロードするには、2 つの方法があります。つまり、モーダルをトリガーする要素にロードするリモート URL を指定するか<a>、モーダルのマークアップで URL を指定します。

前者では、hrefプロパティを使用します。

<a data-target="#myModal" href="/remote/url" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

後者では、data-remoteプロパティを使用します。

<div class="modal fade hide" id="myModal" data-remote="/remote/url">...</div>

要素でそれを指定する利点は<a>、各 に対して異なるリモート URL を持つことができるに<a>もかかわらず、単一のモーダルのみを使用できることです。同じコンテンツでモーダルを起動する手段が複数ある場合は、 data-remoteプロパティを使用する方が有利な場合があります。次に、それを起動するもの (JS 呼び出しであっても) に関係なく、呼び出しのすべてのメソッドでその情報を複製する必要なく、一貫して同じリモート コンテンツを提供します。

後者の方法を使用したデモは次のとおりです。

JSFiddle

モーダルの本体のコンテンツはリモート html です。

于 2012-08-28T15:15:33.103 に答える
8

リンクを使用して、(同じオリジンの) リモート URL を含むブートストラップ モーダルを開く方法を示す実際の例を JSFiddle にドロップしました。これは、リモート URL で機能するようにいくつかのマイナーな変更を加えた、twitter のブートストラップ ドキュメントからのほぼそのままのコピー アンド ペーストです。

要するに、開きたい URL をhref属性で指定し、モーダル ウィンドウとして機能する DIV でdata-target属性を指定するだけです。

JSFIここに入れます

ここに同じコード：

<!-- Button to trigger modal -->
<a href="/matt_hwy1/uEQEP/4/show/" data-target="#myModal" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Test Header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>​
于 2012-11-26T18:57:04.940 に答える