web-dev-qa-db-ja.com

bootstrapモーダルが閉じられたときにリセットし、再度開くにはどうすればよいですか？

bootstrapモーダルのリストボックスとボタンがあります。ボタンをクリックすると、新しいボタンがモーダルのdiv内にレンダリングされます。モーダルを閉じて再度開くと、以前にレンダリングされたボタンのように、モーダルで最後に実行された操作がモーダルに残っています。

モーダルをリセットして、モーダルを再度開いたときにボタンが表示されないようにするには、リストボックスからオプションを再度選択し、ボタンをクリックして新しいボタンをレンダリングするなどの方法があります。

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Select Language</h4>
              </div>
              <div class="modal-body">                

                <button type="button" class="btn" data-dismiss="modal">Close</button>                    
                <button type="button" class="btn" id="submit_form">Submit</button>

              <div class="modal-body1">
                <div id="placeholder-div1">
                </div>                    
              </div>

              </div>

              <div class="modal-footer">


              <script>                    
                $('#submit_form').on('click', function() {
                    $(".modal-body1").html('<h3>test</h3>');
                });                                    
              </script>

              <script>                    
                $(function(){                    
                    $('.modal-footer').click(function() {
                       $('.modal').modal('hide');        
                    });                          
                }); 
              </script>

              </div>

            </div>
          </div>
        </div>

-更新---

なぜこれが機能しないのですか？

              <script type="text/javascript">  
                $(function(){  
                      $('#myModal').on('hidden.bs.modal', function (e) {
                      console.log("Modal hidden");
                      $("#placeholder-div1").html("");
                    });
                });

              </script>
javascriptjqueryhtml5twitter-bootstrap
52
New to Rails

モーダルが非表示の場合、コンテンツを手動でリセットするだけです。

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body1").html("");
});

さらにイベントがあります。それらについての詳細 こちら

$(document).ready(function() {
  $(".modal").on("hidden.bs.modal", function() {
    $(".modal-body1").html("Where did he go?!?!?!");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class='modal-body1'>
          <h3>Close and open, I will be gone!</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
45
Justinas

私に役立ったのは、ready関数に次の行を追加することでした。

$(document).ready(function()
{
    ..
    ...

    // codes works on all bootstrap modal windows in application
    $('.modal').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;

    ...
    ..
});

モーダルウィンドウを閉じて再度開くと、以前に入力および選択した値が初期値にリセットされます。

これがあなたにも役立つことを願っています！

22
eheydenr

クローンを試してから、モーダルが非表示になったときに要素を削除して再追加します。これはすべてのイベントを保持しますが、すべてのすべてのバージョンでこれを完全にテストしたわけではありません。

var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
    $('#myModal').remove();
    var myClone = originalModal.clone();
    $('body').append(myClone);
});
15
Rob

それを試して、うまく働いた

$('#MyModal').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');
})

resetはdomの組み込み関数です。$(this).find('form')[0].reset();を使用することもできます

そして、Bootstrapのモーダルクラスは、モーダル機能にフックするためのいくつかのイベント、detail at here を公開しています。

hide.bs.modalこのイベントは、インスタンスの非表示メソッドが呼び出されるとすぐに発生します。

hidden.bs.modalこのイベントは、モーダルがユーザーに対して非表示になったときに発生します（CSSの移行が完了するまで待機します）。

11
Vatsal Shah

モーダルのすべての入力フィールドをリセットするには、次を使用します。

$(".modal-body input").val("")
8
seetha

これが代替ソリューションです。

DOMに多くの変更（要素とクラスの追加/削除）を行っている場合、「リセット」する必要があることがいくつかあります。モーダルが閉じるときに各要素をクリアするのではなく、モーダルが再度開かれるたびにモーダル全体をリセットできます。

サンプルコード：

(function(){

    var template = null

    $('.modal').on('show.bs.modal', function (event) {
        if (template == null) {
            template = $(this).html()
        } else {
            $(this).html(template)
        }
        // other initialization here, if you want to
    })

})()

後で何が起こるかについてあまり心配することなく、HTMLで初期状態を記述することができます。後でクリーンアップすることを心配することなく、UI JSコードを作成できます。モーダルが再起動されるたびに、最初とまったく同じ状態にリセットされます。

編集：これは、複数のモーダルを処理するバージョンです（テストしていません）...

(function(){

    $('.modal').on('show.bs.modal', function (event) {
        if (!$(this).data('template')) {
            $(this).data('template', $(this).html())
        } else {
            $(this).html($this.data('template'))
        }
        // other initialization here, if you want to
    })

})()
3
musicin3d
(function(){
        $(".modal").on("hidden.bs.modal", function(){
            $(this).removeData();
        });
});

これは、bootstrapモーダルを非表示/閉じるときに連絡先を削除するのに最適なソリューションです。

2
Shamim Hasan

これを試すことができます

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

モデルからすべてのデータが削除され、リセットされます。

0
Jigarb1992

以下のステートメントは、ブートストラップを使用せずにModalを開く/再開する方法を示しています。

CSSに2つのクラスを追加します

そして、以下のjQueryを使用して、モーダルが閉じられている場合は再度開きます。

.hide_block
 {
   display:none  !important;
 }

 .display_block
 {
    display:block !important;
 } 

 $("#Modal").removeClass('hide_block');
 $("#Modal").addClass('display_block');
 $("Modal").show("slow");

それは私のためにうまくいった:)

0
Kiran Kumar D M

私はBS 3.3.7を使用していますが、モーダルを開いて閉じたときに問題があります。モーダルの内容はクライアント側にhtml（ ""）がまったくはっきりしないままです。だから私はこれを使用して、モーダルdiv内のコードを完全に削除しました。さて、別のモーダルからモーダルを開いてこの2番目のモーダルを閉じると、ウィンドウのchromeにパディング右コードが17pxのパディング右のままである理由を尋ねることができます。それが役に立てば幸い...

$(document)
.on('shown.bs.modal', '.modal', function () { 
    $(document.body).addClass('modal-open') 
})
.on('hidden.bs.modal', '.modal', function () { 
    $(document.body).removeClass('modal-open') 
    $(document.body).css("padding-right", "0px");
 $(this).removeData('bs.modal').find(".modal-dialog").empty();
})
0
João Falcão

/ *これは、HTMLコンテンツを、あまり多くのリセットなしでモーダルで更新する新しいHTMLで変更します... * /

var = ""; //HTML to be changed

`$（"。classbuttonClicked "）。click（function（）{

$（ '＃ModalDivToChange'）。html（var）; $（ '＃myModal'）。modal（ 'show'）; }）; `

0
giuseppe