100

ツイッターブートストラップのモーダルポップアップを使用しています。

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

このa要素でajaxを使用してコンテンツをロードできます。

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

ここで、同じモーダルを開く必要がありますが、異なるURLを使用します。このモーダルを使用して、データベースからエンティティを編集しています。したがって、エンティティで[編集]をクリックすると、IDを使用してモーダルをロードする必要があります。

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

リンク番号1をクリックすると、正常に動作します。ただし、リンク番号2をクリックすると、モーダルコンテンツが既に読み込まれているため、リンク番号1のコンテンツが表示されます。

Twitterブートストラップモーダルポップアップでajaxがロードされたコンテンツを更新またはリセットするにはどうすればよいですか？

4

14 に答える 14

100

同じ問題が発生しています。これを行う方法は、data-toggle属性を削除し、リンクのカスタムハンドラーを用意することだと思います。

次の行の何か：

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

後で試してコメントを投稿します。

于 2012-09-20T12:56:30.717 に答える
73

モーダルが閉じているときにデータをアンロードするには、Bootstrap2.xでこれを使用できます。

$('#myModal').on('hidden', function() {
    $(this).removeData('modal');
});

そして、Bootstrap 3（https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516）では：

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});
于 2013-08-27T07:16:01.233 に答える
21

Modalプラグインのhideメソッドの最後にこの行を追加することで、Modalにポップアップを強制的に更新させることができます（bootstrap-transition.js v2.1.1を使用している場合は、836行目にあるはずです）。

this.$element.removeData()

またはイベントリスナーと

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})
于 2012-09-22T22:49:12.847 に答える
15

Bootstrap 3では、「hidden.bs.modal」イベントハンドラーを使用して、モーダル関連のデータを削除し、次回ポップアップを強制的に再ロードできます。

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});
于 2013-12-12T04:10:17.947 に答える
8

他の回答に基づいています（みんなに感謝します）。

.htmlを呼び出すだけでコンテンツ全体が消去され、モーダルを実行した後はコンテンツが読み込まれないため、コードを調整して機能させる必要がありました。そこで、モーダルのコンテンツ領域を探し、そこでHTMLのリセットを適用しました。

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

コントロールがBootstrapを使用しているため、モーダルロードの直前に醜いジャンプが発生するため、受け入れられた答えでうまくいく可能性があります。

于 2014-07-28T19:14:03.123 に答える
5

上記の受け入れられた例よりも少し圧縮されています。data-toggle=modalがオンになっている現在クリックされているもののデータターゲットからターゲットを取得します。これにより、ターゲットモーダルのIDを知る必要がなくなり、同じものを再利用できます。より少ないコード=勝つ！必要に応じて、これを変更して、モーダルのタイトル、ラベル、ボタンをロードすることもできます。

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

リンクの例：

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>
于 2013-01-12T07:02:16.560 に答える
3

Softlionの回答に小さな変更を加えたので、すべてのモーダルが非表示で更新されません。data-refresh ='true'属性を持つモーダルは更新されるだけで、他のモーダルは通常どおり機能します。これが修正されたバージョンです。

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

次に、以下に示す属性を使用します。

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

これにより、data-refresh='true'のモーダルのみが更新されます。また、新しい値が読み込まれるまで古い値が表示されるため、モーダルhtmlをリセットし、htmlを空にしてその値を修正します。

于 2013-10-24T12:10:14.847 に答える
2

これが私のために働いたコーヒースクリプトバージョンです。

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')
于 2014-10-01T14:26:29.423 に答える
1

私もこの問題に悩まされていたので、モーダルのIDが同じであることがわかりました。複数のモーダルが必要な場合は、モーダルの異なるIDが必要です。動的IDを使用しました。これが私のコードですhaml：

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

あなたはこれを行うことができます

<div id="<%= some.id %>" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save" />
  </div>
</div>

モーダルへのリンクは

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

これがあなたのために働くことを願っています。

于 2013-01-15T12:45:40.083 に答える
1

これは、twitterbootstrapのすべてのバージョンで機能します

Javascriptコード：

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

モーダルへのリンクは

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

ポップアップモーダル

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save"/>
</div>

于 2013-09-26T13:50:10.617 に答える
1

あなたはこれを試すことができます：

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});
于 2017-12-04T15:22:38.470 に答える
0

モーダルが閉じたときにAJAXでロードされたコンテンツを削除したかったので、他の人が提案した行を調整しました（coffeescript構文）。

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()
于 2014-01-20T21:36:27.787 に答える
0

var $ table = $（'＃myTable2'）;
$ table.bootstrapTable（'destroy'）;

私のために働いた

于 2019-01-12T08:16:02.713 に答える
0

ステップ1：と呼ばれるモーダルのラッパーを作成しますclone-modal-wrapper。

手順2：。という名前の空白のdivを作成しますmodal-wrapper。

ステップ3：モーダル要素をからclone-modal-wrapperに コピーしmodal-wrapperます。

ステップ4：のモーダルを切り替えmodal-wrapperます。

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <a class="close" data-dismiss="modal">×</a>
               <h3>Header</h3>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
               <input type="submit" class="btn btn-success" value="Save"/>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});
于 2020-05-24T13:26:59.303 に答える