10

TwitterBootstrapAPIからのリモートモーダルダイアログの使用に問題があります。

リモートのhtmlページのコンテンツを含むモーダルダイアログを読み込もうとしています。2つのページがあります。1つはボタン（modal-remote.html）を含み、もう1つはボタンがクリックされたときに表示したいコンテンツ（modal-target.html）を含みます。

modal-remote.html：

<!DOCTYPE html>
<html lang="en">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

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

</html>

これがターゲット（またはリモート）ページのコードです

modal-target.html：

<html>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

    <div class="modal" id="myModal" 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 header</h3>
      </div>
      <div class="modal-body">
        <p>The quick brown fox jumps over the lazy dog. </p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save_btn">Save changes</button>
      </div>
    </div>
</html>

それらは同じディレクトリにあります。ボタンをクリックしても何も起こりません。誰かが私が間違っていることを知っていますか？非リモートモーダルダイアログは問題なく機能します。リモート機能の使用方法がわかりません。

4

2 に答える 2

12

モーダルドキュメントを注意深く読む必要があります。

リモートURLが提供されている場合、コンテンツはjQueryのloadメソッドを介して読み込まれ、.modal-bodyに挿入されます。

あなたのファイルはもっとそのようなものでなければなりません：

modal-remote.html：

<!DOCTYPE html>
<html lang="en">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

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

<div class="modal hide" id="myModal" 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 header</h3>
      </div>
      <div class="modal-body">
        <!-- content will be loaded here -->
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save_btn">Save changes</button>
      </div>
    </div>
</html>

modal-target.html：

<p>The quick brown fox jumps over the lazy dog. </p>
于 2012-10-20T09:17:24.630 に答える
1

Bootstrap v3.30以降、リモートオプションは非推奨になりました。こちらをご覧ください。

したがって、リモートコンテンツを使用するための推奨される方法は、jquery.load（）メソッドを使用することです。

例：

$("modal").load("remote_content.html");
于 2015-01-06T07:41:59.820 に答える