Schaltfläche Neue Postaktualisierung

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> 

Wie kann ich diesen Knopf in ein modales machen? Ich habe an dieser Schaltfläche gearbeitet und möchte an einen Benutzer klicken, der eine modale Ansicht öffnet.

Answer 1

Sie fehlen Daten-Toggle und Daten-Ziel auf die Schaltfläche Attribute:

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

• data-toggle beschreibt , welche Art von Bootstrap Objekt Sie zu wechseln versuchen.

Andere Daten-Toggle-Beispiele sind:

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

• data-target Ziele der bestimmtes Objekt Sie zu wechseln sind versuchen, in diesem Fall #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

Machen Sie eine Taste sagen

<button type="button" id="update-btn" class="btn btn-primary">Update</button> 

außerhalb Ihrer modalen Klasse Dann in Ihrem script Tag

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