BootStrap dialog 居中的解决方案

- 日理万妓 2023-06-20 15:53 2阅读 0赞

# 背景 #

接手了一个古董项目，项目不是前后分离，所以页面需要自己做，由于有个需求是需要弹一个dialog,所以参照项目中之前的代码，之前的代码是用的BootStrap3 ，我照猫画虎的做完，发现dialog倒是能弹出来，但是弹的位置很不让人满意，由于本人不怎么懂前端代码，然后网上一通搜，试了很多，没有一个能够解决我的问题。  
最后实在没有办法，只能拿出我祖传三百年的大杀器，谷歌搜索。我输入相关英文，第一个就是stackoverflow上的问题，于是按照上面的大神的方法，果然有效，有一说一，**真香**。

Bootstrap 代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
        <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">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">模板审核</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="tplIdInput">
                    <input type="hidden" id="productSystemInput">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">模板编号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="templetNum" value="219350186999808" readonly="readonly">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商户系统</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="productSystem" value="16bit-lab" readonly="readonly">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容</label>
                            <div class="col-sm-10">
                                <textarea readonly="readonly" class="form-control" id="templetContent" rows="4"> </textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="messageType" value="通知" readonly="readonly">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">运营商</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="partner_select" title="请选择运营商">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">运营商模板Id</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" placeholder="在这里输入运营商模板Id" id='partnerTplIdInput'
                                       aria-describedby="sizing-addon2">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="save()">通过</button>
                </div>
            </div>
        </div>
    </div>

# 解决方法 #

.modal-dialog {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                width:600px;
                height:500px;
            }

width,height 可以根据实际需要调整

# 参考 #

[stackoverflow][]

[stackoverflow]: https://stackoverflow.com/questions/18422223/bootstrap-3-modal-vertical-position-center