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"
         style="position: absolute;top: 0;left: 0">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="." method="post" class="form-horizontal">
                    {% 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="inputEmail3" class="col-sm-3 control-label">班级名称</label>
                            <div class="col-sm-6">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="classname">教室地址</label>
                            <div class="col-sm-6">
                                <input id="classname" class="form-control" type="text" placeholder="请输入班级名称">
                            </div>
                        </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>

相应的样式代码（因为模态窗太靠近顶部，对位置进行了相应的调整）：

.modal-content {
    position: absolute;
    width: 800px;
    top: 100px;
    left: -150px;
}

.modal-footer {
    text-align: center;
}

.modal-footer .btn+.btn {
    margin-left: 20px;
}

 

转载于:https://www.cnblogs.com/oldpai/p/9633681.html