模态未显示仅显示背景

时间:2017-09-25 07:49:04

标签: javascript jquery html twitter-bootstrap

这是我编辑按钮的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>

单击保存更改时,此处是第二个模式的代码。

 <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() );
}

1 个答案:

答案 0 :(得分:0)

很好地看到你的代码,也许它是你的浏览器版本或者在另一个之前运行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.