モデルのテキストボックスを外にクリックしてクリアする

モデルポップアップでモデルポップアップを作成しました。その中に1つのテキストボックスがあります。ここでgetを外してクリックすると、その中のテキストボックスをクリアします。モデルのテキストボックスを外にクリックしてクリアする

<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <input type="text" class="temp"> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div>

私はテキストボックスにテキストを入力して、外をクリックして、もう一度、私は開いてクリックした場合それは私が前に入力したテキストを示していたモデルはnow.I私がクリックしたテキストをクリアしたい見せていますポップアップの外

出典

2016-12-01 user3386779

$（ '＃のmyModal'）。（ 'hidden.bs.modal'、機能（）{ $（ 'モーダルボディ'）に。（見つけます'入力'）。val（ ''）; –

は

$('#yourModalID').on('hidden.bs.modal', function() { 
     $('.modal-body').find('input').val(''); 
});

出典

2016-12-01 06:22:51

$("#1").click(function(a){ 
 
$(".temp").val(''); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" id="1" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <input type="text" class="temp"> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div>

以下のように試してみてください

出典

2016-12-01 06:25:55 Mahi

適切な方法は、hidden.bs.modalイベントがモーダルに対してトリガされたときにクリアすることです。

モーダルを表示する前にクリアすることもできます。これはshow.bs.modalです。あなたはどちらかこれらのイベントhide.bs.modal, hidden.bs.modal, shown.bs.modal, show.bs.modalのいずれかを使用することができます

See full event list of modal

$("#myModal").on("hidden.bs.modal", function() { 
 
    $("#myModal").find("input").val(""); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
     <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
      </div> 
 
      <input type="text" class="temp"> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div>

出典

2016-12-01 06:30:34 josephting

、これらのイベントでの主な違いは、イベントがトリガされた時刻です。

show.bs.modalモーダルが

shown.bs.modal（CSSの遷移が完了した後で）モーダルが完全に表示されたときに発生しますが示されようとしているときに発生します

hide.bs.modalモーダルが

を非表示にされる前に発生します。

hidden.bs.modalモーダルが完全に非表示になったときに発生します（CSSトランジションが完了した後）

最も良い方法は、hidden.bs.modalイベントまたはshow.bs.modalイベントまたはhide.bs.modalイベント。これらのイベントは、モデルが非表示になる前またはモーダルが表示される前にトリガーされるためです。 shown.bs.modalは、UIが準備完了した後にのみトリガされます。 UIにトランジションは表示されません。

$('#myModal').on('hide.bs.modal', function() { 
     $("input").val(''); 
    });

<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 
     $('#myModal').on('hide.bs.modal', function() { 
 
      $("input").val(''); 
 
     }) 
 
    }) 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
     <h2>Modal Example</h2> 
 
     <!-- Trigger the modal with a button --> 
 
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
     <!-- Modal --> 
 
     <div class="modal fade" id="myModal" role="dialog"> 
 
      <div class="modal-dialog"> 
 

 
       <!-- Modal content--> 
 
       <div class="modal-content"> 
 
        <div class="modal-header"> 
 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
         <h4 class="modal-title">Modal Header</h4> 
 
        </div> 
 
        <div class="modal-body"> 
 
         <p>Some text in the modal.</p> 
 
        </div> 
 
        <input type="text" class="temp"> 
 
        <div class="modal-footer"> 
 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
        </div> 
 
       </div> 
 

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

 
</html>

出典

2016-12-01 06:40:27 Nitheesh

モデルのテキストボックスを外にクリックしてクリアする

答えて

関連する問題