Bootstrap模态框显示不全求助：切换后长模态框显示异常

这个问题我之前也碰到过，核心原因是第一个模态框还没完全隐藏（动画未结束）就打开了第二个，导致Bootstrap无法正确计算长模态框的尺寸和位置。直接打开时长模态框能正常显示，是因为此时页面布局稳定，尺寸计算不受干扰。

解决方案：等待第一个模态框完全隐藏后再打开第二个 #

Bootstrap提供了hidden.bs.modal事件，这个事件会在模态框**完全隐藏（包括淡出动画结束）**后触发。我们在这个事件的回调里打开第二个模态框，就能避免尺寸计算错误。

完整代码示例 #

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smallModal">
        打开小模态框
    </button>

    <!-- 小模态框 -->
    <div class="modal fade" id="smallModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" 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>
                    <h4 class="modal-title">小模态框</h4>
                </div>
                <div class="modal-body">
                    <p>关闭我会自动打开长模态框</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 长模态框 -->
    <div class="modal fade" id="longModal" tabindex="-1" role="dialog">
        <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">&times;</span></button>
                    <h4 class="modal-title">长模态框</h4>
                </div>
                <div class="modal-body">
                    <!-- 模拟大量长内容 -->
                    <p>这是长内容的开始</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>重复内容测试...</p>
                    <p>这是长内容的结束</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 监听小模态框的hidden事件，完全隐藏后打开长模态框
        $('#smallModal').on('hidden.bs.modal', function () {
            $('#longModal').modal('show');
        });
    </script>
</body>
</html>

补充说明 #

如果你的长模态框内容是动态加载的，还需要在内容加载完成后调用$('#longModal').modal('handleUpdate')，强制Bootstrap重新计算模态框的位置和尺寸，确保内容完整显示。

内容的提问来源于stack exchange，提问作者Chris