1. 首頁
  2. 問答
  3. 清除模型中的文本框，然後單擊外部

清除模型中的文本框，然後單擊外部

2016-12-01 37 views
2

我創建了一個帶有模型彈出式的彈出式模型。我在其中有一個文本框。現在單擊外部的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

+0

$（ '＃myModal'）。在（ 'hidden.bs.modal'，函數（）{ $（ '模態體'）。找到（ '輸入'）VAL（ ''）。 –

回答

3

嘗試像下面

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

來源

2016-12-01 06:22:51

1 

$("#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

0

正確的方法是在模態觸發hidden.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

0

您可以使用這些事件hide.bs.modal, hidden.bs.modal, shown.bs.modal, show.bs.modal中的任何一個，在這些事件的主要區別是在該事件被觸發的時間。

show.bs.modal當模態是將要示出

shown.bs.modal時發生完全示出的模態時發生（後CSS轉換已經完成）

hide.bs.modal當模態將要被隱藏時發生

hidden.bs.modal模態完全隱藏時發生（CSS過渡完成後）

最好的方法是使用hidden.bs.modal事件或show.bs.modal事件或hide.bs.modal。因爲這些事件將在隱藏模型或顯示模態之前觸發。只有在UI準備就緒後纔會觸發shown.bs.modal。轉換不會在你的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

相關問題

 相關問題