264

Twitterブートストラップを使用しています。モーダルを指定しました

<div class="modal hide" id="modal-item">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Update Item</h3>
    </div>

    <form action="http://www.website.com/update" method="POST" class="form-horizontal">

    <div class="modal-body">
        Loading content...
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button class="btn btn-primary" type="submit">Update Item</button>
    </div>

    </form>

</div>

そしてリンク

<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

これらのリンクのいずれかを初めてクリックすると、正しいコンテンツが表示されますが、他のリンクをクリックすると、同じコンテンツが初めてロードされたことが表示され、コンテンツは更新されません。

クリックするたびに更新してほしい。

PS：カスタムjQuery関数を使用して簡単に機能させることができますが、ネイティブのBootstrapモーダルリモート関数で可能かどうかを知りたいのですが、それは十分に簡単で、複雑になっていると思います。

4

22 に答える 22

446

問題は 2 つあります。

まず、 Modal オブジェクトがインスタンス化されるdata-targetと、 および以降の呼び出しで指定された要素に永続的にアタッチされ、 modal がそれを呼び出すだけtoggle()で、 の値を更新しないことを示しますoptions。そのため、hrefリンクごとに属性が異なっていても、モーダルが切り替えられても、の値remoteは更新されません。ほとんどのオプションでは、オブジェクトを直接編集することでこれを回避できます。例えば：

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

ただし、この場合は機能しません。なぜなら...

次に、Modal プラグインはModal オブジェクトのコンストラクターでリモート リソースをロードするように設計されています。これは、残念ながら、 に変更が加えられたとしてもoptions.remote、決して再ロードされないことを意味します。

簡単な解決策は、後続のトグルの前に Modal オブジェクトを破棄することです。1 つのオプションは、非表示が終了した後に破棄することです。

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

注:必要に応じてセレクターを調整します。これが最も一般的です。

プランカー

または、モーダルを起動するリンクが前のものと異なるかどうかを確認するなど、より複雑なスキームを考え出すこともできます。もしそうなら、破壊してください。そうでない場合は、リロードする必要はありません。

于 2012-09-05T17:58:21.100 に答える
171

ブートストラップ 3 の場合は、次を使用する必要があります。

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
于 2013-08-08T19:04:57.637 に答える
50

Bootstrap 3.1 の場合、データを削除して、modal-contentダイアログ全体 (3.0) ではなく、リモート コンテンツのロードを待つ間のちらつきを避けるために空にする必要があります。

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

非リモートモーダルを使用している場合は、もちろん、上記のコードは、閉じられるとコンテンツを削除します (悪い)。.local-modalそれらが影響を受けないように、これらのモーダル (クラスなど) に何かを追加する必要がある場合があります。次に、上記のコードを次のように変更します。

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});
于 2014-02-26T19:42:43.220 に答える
30

ありがとうマーヴ。私はboostrap.jsをいじり始めましたが、あなたの答えは迅速でクリーンな回避策です. これが私のコードで最終的に使用したものです。

$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});
于 2012-09-20T01:28:46.023 に答える
21

受け入れられた答えは私にはうまくいかなかったので、JavaScriptを使ってそれをしました。

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})
于 2012-10-21T15:15:59.363 に答える
14

これは Bootstrap 3 で動作します 参考までに

$('#myModal').on('hidden.bs.modal', function () {
  $(this).removeData('bs.modal');
});
于 2013-09-09T05:24:58.500 に答える
7

私のプロジェクトは Yii で構築されており、Bootstrap-Yii プラグインを使用しているため、この回答は Yii を使用している場合にのみ関連します。

上記の修正は機能しましたが、モーダルが最初に表示された後にのみ機能しました。初めて空になりました。これは、コードの開始後に Yii がモーダルの非表示関数を呼び出し、それによって開始変数がクリアされたためだと思います。

モーダルを起動したコードの直前に removeData 呼び出しを配置するとうまくいくことがわかりました。だから私のコードはこのように構成されています...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});
于 2012-10-10T10:12:19.450 に答える
2

私にとって唯一の作業オプションは次のとおりです。

$('body').on('hidden.bs.modal', '#modalBox', function () {
    $(this).remove();
});

私は Bootstrap 3 を使用しており popup('popup content') 、モーダル ボックスの html を追加するという関数があります。

于 2015-07-06T12:41:00.980 に答える
0

Bootstrap 3 では、modal.js で次のように変更しました。

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

に

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { 
    $(this).removeData('bs.modal').empty()
    $(document.body).removeClass('modal-open')
  })

（わかりやすくするために余分なスペースが追加されています）

これにより、モーダル コンテナーで empty() を呼び出し、データを削除することで、古いモーダル コンテンツの不要なフラッシュを防止します。

于 2013-12-10T20:49:38.247 に答える
0 
$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

好きなように空にしたいhtml要素（div、span何でも）。

于 2015-06-24T05:19:04.483 に答える
0

@mervによって受け入れられた回答の拡張版。また、非表示になっているモーダルがリモート ソースからロードされているかどうかを確認し、古いコンテンツを消去して点滅を防ぎます。

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

于 2016-03-31T14:04:25.123 に答える
-1

Bootstrap バージョン 3.3.2 でテスト済み

  $('#myModal').on('hide.bs.modal', function() {
    $(this).removeData();
  });
于 2015-02-16T09:24:44.343 に答える
-4

これで頑張ってください：

$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});
于 2016-02-17T15:36:05.857 に答える