bootstarp模态框按钮居中 （一左一右 垂直水平居中）

因为按钮在底部栏 <div class="modal-footer">    要想让按钮一左一右显示    需要在按钮标签上加一个 div 

这样就可以进行位置变动

 获取模态框的宽度     自定义按钮位置

<div class="modal fade" id="Ascertainmsg" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" 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">&times;</span>
                </button>
                <h5 class="modal-title">警告！</h5>
            </div>
            <div class="modal-body" style="background-color: #F9D7DB;text-align: center;margin: 0 auto;font-family: 华文楷体;">
                <span style="font-size: 21px; text-align: center;margin: 0 auto;color: #60b6ff;"><strong id="warnmsg"></strong></span>
                <p><span style="font-size: 24px; text-align: center;margin: 0 auto;"><strong >您确定删除吗？</strong></span></p>
            </div>

            <div class="modal-footer">
                <div class="btn-group" role="group" style="padding-right: 80px;">
                    <button type="button" class="btn btn-primary " onclick="CheckPost()" data-dismiss="modal" style="width: 90px;"
                            id="deleteHaulBtn" >确认</button>
                </div>
                <div class="btn-group" role="group"  style="margin-right: 100px;">
                    <button type="button" class="btn btn-default " style="width: 90px;"
                            data-dismiss="modal">取消</button>
                </div>
 
            </div>
        </div>
    </div>
</div>

 

 

 

若字符串太长   需要换行显示

<br> 换行       \n在这里不起作用

if (chipText != ""){
    if (chipText.length > 8) { text = text + " | "+"<br>"+ chipText;  }
    else text = text + " | "+ chipText;
}

document.getElementById("warnmsg").innerHTML = text;

 

 

有时候弹窗要求在页面水平垂直居中    

因为bootstarp4用到的比较少，  Bootstrap3 垂直水平居中   

https://blog.csdn.net/hyt941026/article/details/83545706  直接复制代码到页面  不需修改

    //模态框居中问题 start
    function centerModals() {
        $('.modal').each(function(i) {
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
            top = top > 50 ? top : 0;
            $clone.remove();
            $(this).find('.modal-content').css("margin-top", top - 50);
        });
    }
    // 在模态框出现的时候调用垂直居中方法
    $('.modal').on('show.bs.modal', centerModals);
    // 在窗口大小改变的时候调用垂直居中方法
    $(window).on('resize', centerModals);
    //模态框居中问题end

 

 

 

 

bootstarp4 有这个css

将 .modal-dialog-centered 添加到 .modal-dialog 对话框以垂直居中模式。

https://www.qdskill.com/docs/bootstrap/docs/4.0/components/modal/#vertically-centered

<!-- Modal -->
<div class="modal fade" id="successMsg" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="background-color: #DFF0D8;text-align: center;margin: 0 auto;">
                <span style="font-family: 华文楷体;font-size: 30px; text-align: center;margin: 0 auto;"><strong>操作成功</strong></span>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>