设置bootstrap中模态框（modal）框的位置（随窗口大小自动居中）

宇文智

已于 2022-03-16 16:16:47 修改

阅读量8.9k

点赞数 2

分类专栏：前端文章标签： modal bootstrap jquery javascript

于 2020-01-01 16:48:32 首次发布

本文链接：https://blog.csdn.net/m0_38109926/article/details/103793960

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

以默认大小的 modal 为例，要做改变宽度其实只需要在 .modal-dialog 样式上做文章就行了。为了简单，我现在直接写在元素标签上了。

关键三点：

用 display: inline-block；
父节点用 text-center 样式居中；
重置宽度 width: auto

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>                                                                              
       
    </style>
</head>

<body>
    <h2>创建模态框（Modal）</h2>
        <!-- 按钮触发模态框 -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            开始演示模态框
        </button>
        <!-- 模态框（Modal） -->
        <div class="modal fade text-center" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">
                <div class="modal-content" id="docModalContent" style="width: 1200px;">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">
                            模态框（Modal）标题
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        
                    </div>
                    <div class="modal-body">
                        <div style="width: 1000px;overflow: auto;"></div>
                        在这里添加一些文本
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
</body>
    <script>
     //modal框随窗口自动居中
     $("#myModal").on('show.bs.modal',function(){
    	modalResize();
    })
    $(window).resize(function(){
    	modalResize();
    })
    function modalResize(){
    	var winWidth = $(document.body).width(); 
    	var modalWidth = $("#docModalContent").width();
    	var width = (winWidth-modalWidth)/2 + "px"
    	$("#myModal").find(".modal-dialog").css({
    		'margin-left':width
        });
    }
   
</script>
</html>