清除模型中的文本框，然后单击外部

我创建了一个带有模型弹出式的弹出式模型。我在其中有一个文本框。现在单击外部的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之前将其清除。

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

您可以使用这些事件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

清除模型中的文本框，然后单击外部

回答

相关问题