Bootstrap Pop-up Modal未显示。相反,我得到了黑屏

时间:2018-01-08 07:15:02

标签: css twitter-bootstrap jsp modal-dialog bootstrap-modal

我正在研究2个自举模态 - 更新模态&删除模态。 更新模式在单击更新按钮时工作得非常好。 但是当我点击删除按钮(与更新相同)时,删除模式不会弹出,而是我得到一个黑屏。 我在这个问题上苦苦挣扎很长时间,无法得到解决方案。 我已经尝试过"检查元素" &安培;比较两种模态,但对我来说似乎很好。 另外,我在SOF上发现了类似的查询,但它没有用。 我添加/删除了不同的css&脚本标签中的js文件,但它仍然不适合我。 以下是代码: -

CSS& head标签内的js链接: -

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

更新&amp;删除按钮以调用模态: -

<td align="center">
<!-- Update Button -->
<button class="btn btn-primary btn-xs" onclick="editEmp(${emp.empid})" data-toggle="modal" data-target="#editemp" data-title="Edit"><em class="glyphicon glyphicon-pencil"></em></button>
<!-- Delete Button -->
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteemp" data-title="Delete"><em class="glyphicon glyphicon-trash"></em></button>
</td>

更新模式: -

<div class="modal fade" id="editemp" tabindex="-1" role="dialog"
        aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="left: -600px" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>

                </div>
<form:form id = "regForm" action="registerEmp" modelAttribute="empreg">
<!-- some form elements -->
</form:form>
</div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

删除模式

<div class="modal fade" id="deleteemp" tabindex="-1" role="dialog"
        aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="left: -640px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                    <h4 class="modal-title custom_align" id="Heading">Delete this
                        entry</h4>
                </div>
                <div class="modal-body">

                    <div class="alert alert-danger">
                        <span class="glyphicon glyphicon-warning-sign"></span> Are you
                        sure you want to delete this Record?
                    </div>

                </div>
                <div class="modal-footer ">
                    <button type="button" class="btn btn-success">
                        <span class="glyphicon glyphicon-ok-sign"></span> Yes
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span> No
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

@CoderDS

Link For Reference

您错过了结束// check for particular weekday onChangeCheckWeek(week: any, isChecked: boolean) { if (isChecked) { this.checkAll = false; } else { this.checkAll = false; } } // check all weekdays onChangeCheckAll(isChecked: boolean) { if (isChecked) { this.checkAllWeek = true; } else { this.checkAll = false; this.checkAllWeek = false; } } 。这应该可以完成你的工作。

更新了HTML

div