Bootstrap 3模式在圖像點擊時未打開

Question

我正在嘗試通過單擊圖像來啟動模式窗口，並且正在發生的情況是疊加層已加載但沒有窗口，因此我必須刷新瀏覽器以關閉疊加層。

我只加載了bootstrap.js和jquery.js的1個實例，並且控制台中沒有錯誤。 如果有人可以檢查我的代碼並指出我的錯誤，我將不勝感激。 謝謝

 $(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 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> 

Answer 1

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>