モーダルは表示されません。背景のみが表示されます

Question

これは編集ボタンのHTMLコードです。編集ボタンをクリックすると、モーダルがポップアップしません。

<div class="modal fade" id="editModal"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h5 class="modal-title">Edit record</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 class="form-group"> 
        <input type="hidden" id="editid" name="id" class="form-control"> 
        <input type="text" id="editname" name="name" class="form-control"> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="submit" onclick="editModal(event)" class="btn btn-primary">Save changes</button> 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

変更の保存をクリックしたときの2番目のモーダルのコードは次のとおりです。

<div class="modal fade" id="confirmationModal1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <form action="php/edit_client.php" method="post"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title">Confirmation</h4> 
       </div> 
       <div class="modal-body"> 
        Are you sure you want to edit this client? 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
        <button type="submit" class="btn btn-primary" onclick="validateForm()">Save</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

これは、モーダルが表示されるjavascriptです。よくあなたのコードを見て

function validateForm(e) { 

    } 

    function editModal(event) { 
    $("#editModal").modal("show"); 

    focusedid = e; 
    identifier = focusedid.split('-')[1]; 

    $("#editid").val($("#id-" + identifier).val()); 
    $("#editname").val($("#name-" + identifier).val()); 
} 

Answer 1

が、多分それはあなたのブラウザのバージョンであるか、別の前にjqueryのを実行している、私は同様の問題を抱えていた、別のプロジェクトには、次のように働いた：

$('#editModal').on('show.bs.modal', function (event) { //here goes the modal id 
    var button = $(event.relatedTarget) // Button that activated the modal 
} var modal = $(this) 
    $('.alert').hide(); 
}) 

が異なるバージョンで、またはので、私は考えて、以下のいずれかに私のコードを変更します。

：

$("#btn_show_modal").click(function(){ //here goes the button id that activates it 
    $("#editModal").modal("show"); //here goes the modal id 
}); 

が、前に、ボタンは次のコードを入れて

<a data-toggle="modal" data-target="#editModal"> //where is the link to modal, and data-targat indicates to which modal id references. practicamente, la etiquieta a indica el vinculo a el modal, incluso puedes colocar ese viculo a el boton para ahorrar codigo. 
    <button type="button" value="Modal"/> //default button 
</a> 

スペイン語を話すのが望ましい場合は、コメントを理解するまで翻訳してください。がんばろう。

//De preferencia si hablas español traduce hasta los comentarios para entenderlo. Buena suerte.