1

私は本当に私がそのリンクをクリックしてオープンした後どのように私はブートストラップモーダル内のボタンをクリックすることができ、知りたい:後にモーダル内のボタンをクリックする方法はありますか?

<a href="#" data-toggle="modal" data-target="#myid"> 

ボタンは、IDS'を持っているので、私は、私が使用してボタンをクリックすることができると思いますjsしかし、私は本当にこれに対処する方法を知りません。

モーダルコールの後にdata-target$("#buttonid").click();などの関数を使用できますか?

私は結果を試しました。 ここ

を認めることになるすべてのヘルプは、ボタンのコードは次のとおりです。あなたが追加することができます

<button type="submit" id="buttonid" name="Profile" href="#"> 
+0

にトリガーを呼び出しあなたのボタンのHTMLコードですか? 'data-target'部分を理解できません。 –

+0

data-targetは、モーダルIDを示すために使用されます。 –

+0

ボタンのFORM内にありますか? –

答えて

0

はモーダル示すイベント

$('#myid').on('shown.bs.modal', function() { 
    $("#buttonid").trigger('click'); 
});  
2

$('#myModal').on('shown.bs.modal', function (event) { 
 
$("#newBtn").trigger("click"); 
 
}); 
 

 
$("#newBtn").on("click",function(){ 
 
alert("button inside modal clicked"); 
 
    
 
})
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<!-- 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 id="myModal" class="modal fade" 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"> 
 
    You can make the button hidden by adding class hidden to button. 
 
     <button type="button" id="newBtn" class="btn btn-sm btn-info">clicked on modal open</button> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

関連する問題