新しい投稿の更新ボタン

Question

<i class="fa fa-plus-square-o" aria-hidden="true" style="font-size: 45px; cursor: pointer;"></i> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

どうすればこのボタンをモーダルにすることができますか？私はこのボタンを使って作業していたので、ユーザーがクリックしてモーダルビューを開くことができました。あなたは、ボタンの属性データトグルとデータ・ターゲットが欠落している

Answer 1

：

data-toggle="modal" data-target="#myModal" 

• data-toggleたブートストラップオブジェクトの種類あなたが切り替えしようとしているを示しています。

その他のデータトグル例は以下のとおりです。

data-toggle="modal" 
data-toggle="collapse" 
data-toggle="dropdown" 
data-toggle="tab" 

• data-targetは、あなたがこの場合#myModalには、切り替えしようとしている特定のオブジェクトをターゲットとしています。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<i class="fa fa-plus-square-o" aria-hidden="true" style="font-size: 45px; cursor: pointer;" data-toggle="modal" data-target="#myModal"></i> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

とき、ブートストラップ、ボタンは良い習慣ではありませんあなたのscriptタグ

$('#update-btn').click(function()({ 
    $('#myModal').modal('show'); 
});