bootstrap图层弹起（模态框）

最新推荐文章于 2021-06-05 06:24:21 发布

huoyuanshen

最新推荐文章于 2021-06-05 06:24:21 发布

阅读量370

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/huoyuanshen/article/details/85048009

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、最好总在独立的问题，如body前端，防止样式干扰，并标记明显分割线。

2、页面中有两个以上模态框时，注意关键字名称，无重复。

3、$("#btn_cancel_rejectCheck").on('click',function(){，这种方法只会在获取的第一个dom添加动作，避免dom重名。

<div class="container-fluid text-center"> #居中展示
        <form id="obj_form" class="form-horizontal"> #对input的label进行样式优化。
            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
                 id="reject_form_id"
                 style="display:none;">
                <div class="modal-dialog"  style="width: 1000px;top: 200px"> ##确定宽度和位置
                    <div class="modal-content" id="pop-reg-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                    id="close_reject_modal"><i class="fa fa-times"></i></button>
                            <h4 class="modal-title">SQL工单详细信息</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group ">
                                {% bootstrap_field form.work_id layout="horizontal" %}
                                
                            </div>
                        </div>
                        <div class="modal-footer ">
                            <button type="button" class="btn btn-default btn_cancel" data-dismiss="modal">
                                取消
                            </button>
                            <button type="button" class="btn btn-warning" onclick="pre_reject()">
                                驳回
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

<!--rejectCheck模态框-------------------------->
    <div class="container-fluid text-center">
        <!-- 模态框（Modal） -->
        <form id="obj_form" class="form-horizontal">
            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true"
                 id="reject_check_modal_id"
                 style="display:none;">
                <div class="modal-dialog"   style="width: 1000px">
                    <div class="modal-content" id="pop-reg-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="close_reject_check_modal">
                                <i class="fa fa-times"></i></button>
                        </div>
                        <div class="modal-body" id="pop-reg-body">

                            <div class="form-group ">
                                {% bootstrap_field form.work_id layout="horizontal" %}
                            </div>
                        </div>
                        <div class="modal-footer ">
                            <button type="button" class="btn btn-default btn_cancel"  id="btn_cancel_rejectCheck">
                                取消
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>


//rejectCheckForm的取消按钮
$("#btn_cancel_rejectCheck").on('click',function(){
$("#close_reject_check_modal").trigger('click');
$('#reject_form_id').modal();
});

//rejectForm的驳回按钮
function pre_reject(){
$("#close_reject_modal").trigger("click");
$('#reject_check_modal_id').modal();
};