Bootstrap Modal 在iOS设备(iPhone/iPad)中无法正常弹出显示的问题及解决方法

最近在用Bootstrap modal的时候，遇到了在iOS设备上无法正常显示的问题。

上网查了一下，在 Github 找到一个类似的问题。基本上是因为把 Modal组件放在responsive table中了，所以导致了一些问题。解决方案就是，把modal放在 Html Table tag (and bootstrap "table-responsive" class) 外面。

this is because the overflow and scrolling in the responsive table creates a new formatting context that breaks some stuff. Same thing happens when putting modals in stickied or fixed position elements. Think this is closable as a won't fix / can't fix right now.


在iOS设备中不能正常显示的代码
点击查看代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="mt-3">
        <div class="table-responsive">
            <table class="table table-borderless caption-top">
                <caption></caption>
                <thead class="border-bottom border-dark">
                    <tr>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                    </tr>
                </thead>
                <tbody>
                    <div>
                        <tr>
                            <td>a</td>
                            <td>b</td>
                            <td>a</td>
                            <td>b</td>
                            <td>a</td>
                            <td>b</td>
                            <td>a</td>
                            <td>b</td>
                        </tr>
                        <tr class="border-bottom">
                            <td></td>
                            <td colspan="6">
                                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                    data-bs-target="#testModal">
                                    <nobr>btnModal</nobr>
                                </button>
                            </td>
                        </tr>
                        <div class="modal fade" id="testModal" tabindex="-1" aria-labelledby="editModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <label class="form-label">Are you sure ? </label>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Back</button>
                                        <button type="button" class="btn btn-primary">OK</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </tbody>
            </table>
        </div>

    </div>
</body>

</html>

在iOS设备中能够正常显示的代码

点击查看代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="mt-3">
        <div class="table-responsive">
            <table class="table table-borderless caption-top">
                <caption></caption>
                <thead class="border-bottom border-dark">
                    <tr>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                        <th>ha</th>
                    </tr>
                </thead>
                <tbody>
                    <div>
                        <tr>
                            <td>a</td>
                            <td>b</td>
                            <td>a</td>
                            <td>b</td>
                            <td>a</td>
                            <td>b</td>
                            <td>a</td>
                            <td>b</td>
                        </tr>
                        <tr class="border-bottom">
                            <td></td>
                            <td colspan="6">
                                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                    data-bs-target="#testModal">
                                    <nobr>btnModal</nobr>
                                </button>
                            </td>
                        </tr>


                    </div>

                </tbody>
            </table>
        </div>
        <div class="modal fade" id="testModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label class="form-label">Are you sure ? </label>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button>
                        <button type="button" class="btn btn-primary">OK</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

参考资料： Bootstrap modal bugged only when open on iphone/ipad #31638
[https://github.com/twbs/bootstrap/issues/31638](https://github.com/twbs/bootstrap/issues/31638 "https://github.com/twbs/bootstrap/issues/31638")
posted @   asashadow  阅读(361)  评论(0)  编辑  收藏  举报
相关博文：
·  在做SpringBootTest的时候，报错【 Factory method 'filterChain' threw exception with message: This object has already been built 】
·  SpringBoot事务相关备忘（方法添加@Transactional注解，以及SQL语句(SQLServer数据库)添加SET NOCOUNT ON）
·  bootstrap实现弹出窗口
·  CSS & JS Effect – Dialog Modal
·  Bootstrap的模态框无法弹出解决方案
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
more_horiz
keyboard_arrow_up light_mode palette
选择主题
点击右上角即可分享
微信分享提示
SQL AI 助手