Bootstrap模态窗实例

导入相关插件

<link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.min.css">
<script src="{% static '/plugin/jquery/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap/js/bootstrap.min.js' %}"></script>

模态窗代码

<div>
    <a class="btn btn-info" data-toggle="modal" data-target="#addClass"><i class="fa fa-address-book">&nbsp;</i>添加班级</a>
</div>
<!-- 添加班级模态窗 -->
<div class="modal fade" id="addClass" tabindex="-1" role="dialog" aria-labelledby="XXX">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="." method="post">
            {% csrf_token %}
                <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">添加班级</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="classname">学生名称</label>
                        <input id="classname" type="text" placeholder="请输入班级名称">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="ajaxAddClass();">
                        提交
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>