Bootstrap 3模态未在图像点击时打开

时间：2018-03-06 06:12:13

标签： javascript jquery twitter-bootstrap

我试图通过点击图像启动模态窗口，发生的事情是加载了叠加但没有窗口，我必须刷新浏览器才能关闭叠加层。

我只加载了1个bootstrap.js和jquery.js实例，并且控制台中没有错误。如果有人能检查我的代码并指出我的错误，我将不胜感激。感谢

＆＃13;
＆＃13; 
$(function() {
  $(document).on('click', '.edit', function(e) {
    e.preventDefault();
    // code to read selected table row cell data (values).
    var currentRow = $(this).closest("tr");
    id = currentRow.find("td:eq(0)").html();
    service = currentRow.find("td:eq(1)").html();
    activity = currentRow.find("td:eq(2)").html();
    dept = currentRow.find("td:eq(3)").html();
    company = currentRow.find("td:eq(4)").html();
    address = currentRow.find("td:eq(5)").html();
    user = currentRow.find("td:eq(6)").html();
    item = currentRow.find("td:eq(7)").html();
    ddate = currentRow.find("td:eq(8)").html();
    date = currentRow.find("td:eq(9)").html();
    var data = id + "\n" + service + "\n" + activity + "\n" + dept + "\n" + company + "\n" + address + "\n" + user + "\n" + item + "\n" + date + "\n" + ddate;
    $('#editni').modal('show');
    $("#id").val(id);
    $("#service").val(service);
    $("#activity").val(activity);
    $("#dept").val(dept);
    $("#company").val(company);
    $("#address").val(address);
    $("#user").val(user);
    $("#item").val(item);
    $("#dddatetimepicker").val(ddate);
    $("#datetimepicker").val(date);
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<input type='image' class='edit' src='/domain/admin/images/editicon.png' width='34px' height='36px' />

<div class="modal fade" id="editni" tabindex="-1" role="dialog" aria-labelledby="editniLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="editniLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="message"></div>
        <form id="editForm" name="editForm">
          <div class="text"></div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="id">id</label>
            <input id="id" name="id" class="editInput" readonly type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="service">Service</label>
            <input id="service" name="service" class="editInput" type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="activity">Activity</label>
            <input id="activity" name="activity" class="editInput" type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="dept">Department</label>
            <input id="dept" name="dept" class="editInput" type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="address">Address</label>
            <input id="address" name="address" class="editInput" type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="company">Company</label>
            <input id="company" name="company" class="editInput" type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="user">User</label>
            <input id="user" name="user" class="editInput" type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="item">Item</label>
            <input id="item" name="item" class="editInput" type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="dddatetimepicker">Destroy Date</label>
            <input id="dddatetimepicker" name="dddatetimepicker" class="editInput" type="text" value="">
          </div>
          <div class="form-group-contact">
            <label class="labelStyle-contact" for="datetimepicker">Intake Date</label>
            <input id="datetimepicker" name="datetimepicker" class="editInput" type="text" value="">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

It Looks Like There Is an issue in inculding boostrap References   


 <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Pratice</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <input type='image' class='edit' src='/domain/admin/images/editicon.png' width='34px' height='36px' />

        <div class="modal fade" id="editni" tabindex="-1" role="dialog" aria-labelledby="editniLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editniLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <div id="message"></div>
                        <form id="editForm" name="editForm">
                            <div class="text"></div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="id">id</label>
                                <input id="id" name="id" class="editInput" readonly type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="service">Service</label>
                                <input id="service" name="service" class="editInput" type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="activity">Activity</label>
                                <input id="activity" name="activity" class="editInput" type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="dept">Department</label>
                                <input id="dept" name="dept" class="editInput" type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="address">Address</label>
                                <input id="address" name="address" class="editInput" type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="company">Company</label>
                                <input id="company" name="company" class="editInput" type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="user">User</label>
                                <input id="user" name="user" class="editInput" type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="item">Item</label>
                                <input id="item" name="item" class="editInput" type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="dddatetimepicker">Destroy Date</label>
                                <input id="dddatetimepicker" name="dddatetimepicker" class="editInput" type="text" value="">
                            </div>
                            <div class="form-group-contact">
                                <label class="labelStyle-contact" for="datetimepicker">Intake Date</label>
                                <input id="datetimepicker" name="datetimepicker" class="editInput" type="text" value="">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    <script type="text/javascript">

        $(function() {
      $(document).on('click', '.edit', function(e) {
        e.preventDefault();
        // code to read selected table row cell data (values).
        var currentRow = $(this).closest("tr");
        id = currentRow.find("td:eq(0)").html();
        service = currentRow.find("td:eq(1)").html();
        activity = currentRow.find("td:eq(2)").html();
        dept = currentRow.find("td:eq(3)").html();
        company = currentRow.find("td:eq(4)").html();
        address = currentRow.find("td:eq(5)").html();
        user = currentRow.find("td:eq(6)").html();
        item = currentRow.find("td:eq(7)").html();
        ddate = currentRow.find("td:eq(8)").html();
        date = currentRow.find("td:eq(9)").html();
        var data = id + "\n" + service + "\n" + activity + "\n" + dept + "\n" + company + "\n" + address + "\n" + user + "\n" + item + "\n" + date + "\n" + ddate;
        $('#editni').modal('show');
        $("#id").val(id);
        $("#service").val(service);
        $("#activity").val(activity);
        $("#dept").val(dept);
        $("#company").val(company);
        $("#address").val(address);
        $("#user").val(user);
        $("#item").val(item);
        $("#dddatetimepicker").val(ddate);
        $("#datetimepicker").val(date);
      });
    });

    </script>
    </body>

    </html>
相关问题
最新问题