仅在 iphone/ipad 上打开时的引导模式错误答案

【问题标题】：Bootstrap modal bug when open ONLY on iphone/ipad仅在 iphone/ipad 上打开时的引导模式错误
【发布时间】：2020-09-12 08:44:42
【问题描述】：

当我打开 Bootstrap 模式时，我在 iphone（和 ipad）上发现了一个非常奇怪的错误。黑色（半透明）背景很好地显示，但模态不显示。什么都看不见，用户被屏蔽了。

我正在使用以下库：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

我已经理解了一个可能的原因，我将模态的所有内容都包含在一个 html 表格中。在以下示例中，我们可以看到两个工作案例和一个与错误有关的案例：

    <!-- debug popup -->
<!DOCTYPE html>
<html lang="fr" class="no-js">

<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">
    <meta name="keywords" content="test" />
    <meta name="author" content="Kaio Gaming" />
    <link rel="shortcut icon" href="https://www.blabl.fr/favicon.ico" sizes="96x96" type="image/x-icon" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script language="JavaScript" src="/membreDev/js/modernizr.js?version=1.0.3a"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>


    <link href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"
        integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

    <title>debug popup</title>
    <meta name="description" content="debug popup de Kaio Gaming" />

</head>

<body>
    <div class="container theme-showcase" role="main">
        <div class="jumbotron">
            <center>
                <h1>debug popup</h1>
            </center>
            <div class="row float-right">
                <a type="button" href="../index.php" class="btn btn-danger">&larr;</a>
            </div>
        </div>
    </div>

    <main role="main">
        <div class="container marketing">
            <h1>Working case #1: button and modal content directly in HTML root code</h1>
            <button type="button" class="btn btn-danger col-12" aria-haspopup="true" aria-expanded="false"
                title="Faire une demande" id="btn-demande-acces" data-toggle="modal" data-target="#popup-demande-acces"
                data-backdrop="static" data-keyboard="false">
                Demander un accès
            </button>
            <div class="modal fade" id="popup-demande-acces" tabindex="-1" role="dialog" aria-labelledby=""
                aria-hidden="true" style="display: none;">
                <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <center>
                                <h4 class="modal-title" id="modTitle">Faire une demande d'accès</h4>
                            </center> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="javascript:void(0);" id="submitModalDemandeAcces">
                                <div class="form-group hide">
                                    <label for="Demandeur" class="control-label">Demandeur:
                                    </label>
                                    <select required="" value="1" class="custom-select" id="Demandeur"
                                        placeholder="Demandeur à définir" name="Demandeur">
                                        <option value="blablabla">blablabla (Exemple)</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="Type" class="control-label">Type:
                                    </label>
                                    <select value="1" class="custom-select" id="Type" required=""
                                        placeholder="Type à définir" name="Type">
                                        <option value="1">Example</option>
                                    </select></div>
                                <div class="form-group">
                                    <label for="Details_de_la_demande" class="control-label">Détails de la demande:
                                    </label>
                                    <input type="text" class="form-control" value="" name="Details_de_la_demande"
                                        id="Details_de_la_demande" required=""
                                        placeholder="Détails de la demande à définir">
                                </div>
                                <div class="modal-footer">
                                    <center> <button type="submit" class="btn btn-primary" title="Ajouter ➕">Ajouter
                                            ➕</button>
                                        <button id="demande_annulation" type="button" class="btn btn-default"
                                            data-dismiss="modal">Annuler ⨯</button> </center>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


            <h1>Working case #2: the button is in the table, but the content is outside the table</h1>
            <div class="table-responsive ">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>
                                <center>Membre</center>
                            </th>
                            <th>
                                <center></center>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="rows countLineId row_1">
                            <td><span title="membre-97">ssj (ssj)</span></td>
                            <td>
                                <center><button type="button" class="btn btn-secondary" data-toggle="modal"
                                        data-target="#contactModal_97">Contacter</button>
                                </center>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- modal body outside the TABLE -->
            <div class="modal fade" id="contactModal_97" tabindex="-1" role="dialog" aria-labelledby="Contacter membre"
                aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="viewMembre" title="Contact">
                                Contacter <a title="Voir le profil membre"
                                    href="https://www.blabla.fr/monCompte/maPage.php?pseudo=ssj">ssj:
                                    ssj</a>
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <ul>
                                <li>Email: <a href="mailto:ss@gmail.com">ss@gmail.com</a>
                                </li>

                                <li>Portable: <a href="tel:97678">97678</a></li>
                                <li>Discord: 0999897</li>
                                <li>Adresse postal: <a target="_blank"
                                        href="https://www.google.com/maps/place/blabla FRANCE"
                                        title="Google Maps">blabla, FRANCE</a> </li>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>


            <h1>ERROR case: the open modal button AND the content is inside the table</h1>
            <div class="table-responsive ">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>
                                <center>Membre</center>
                            </th>
                            <th>
                                <center></center>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="rows countLineId row_1">
                            <td><span title="membre-96">ssj (ssj)</span></td>
                            <td>
                                <center><button type="button" class="btn btn-secondary" data-toggle="modal"
                                        data-target="#contactModal_96">Contacter</button>
                                    <div class="modal fade" id="contactModal_96" tabindex="-1" role="dialog"
                                        aria-labelledby="Contacter membre" aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="viewMembre" title="Contact">
                                                        Contacter <a title="Voir le profil membre"
                                                            href="https://www.blabla.fr/monCompte/maPage.php?pseudo=ssj">ssj:
                                                            ssj</a>
                                                    </h5>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <ul>
                                                        <li>Email: <a href="mailto:ss@gmail.com">ss@gmail.com</a>
                                                        </li>

                                                        <li>Portable: <a href="tel:97678">97678</a></li>
                                                        <li>Discord: 976575</li>
                                                        <li>Adresse postal: <a target="_blank"
                                                                href="https://www.google.com/maps/place/blabla FRANCE"
                                                                title="Google Maps">blabla, FRANCE</a> </li>
                                                    </ul>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">Fermer</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </center>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</body>

</html>

【问题讨论】：

嘿 Nico，不要在此处粘贴 php 代码，在客户端浏览器上向我们展示您的 html 页面源（渲染后的），以便社区可以尝试复制您的问题，请在此处查看更多详细信息 > stackoverflow.com/help/minimal-reproducible-example并分享你使用的js和css
我已经在考虑一个 JS 解决方案，将所有模态内容代码移到 HTML 表格之外......但这真的很糟糕，我宁愿修复 css 中的错误 ^^跨度>
好的@KresimirPendic，对不起，我会更新我的问题；）
完成，我用页面上生成的 HTML 替换源代码 - CSS 除外（因为它太大了）
如果你想帮助我并在iphone上检查结果，我在这里创建一个带有示例的页面link不需要身份验证，请看一下;）

标签： css iphone twitter-bootstrap modal-dialog popup

【解决方案1】：

我使用的唯一解决方法是在所有模态弹出 html 块上应用相同的 modal-dialog-centered 类 - 因为看起来 iphone 定位总是会将其定位在页面顶部（在你的情况下它看起来像它没有显示 - 但它实际上就在那里 :() 在此处查看简短演示 >

如果您有时间，我认为这对于在问题 @github repo of bootstrap 下提交可能是有效的，但是从提交它到实际在 cdn 或其他地方被推送的过程有点长，所以这就是为什么我d 使用 modal-dialog-centered 或使用自定义 css 将模态框定位到您需要的位置

【讨论】：

这是一个非常好的答案（我很想知道您使用哪种工具生成此 GIF）。在提交您的帖子作为答案之前，请问您应该添加哪种 CSS？一个特定的 iOS （如媒体查询）或自定义 css 来修复 z-index 和 position ？你能再帮我一次吗？

【解决方案2】：

我使用“脏”代码修复了我的错误。

我在我的所有模态正文元素中添加了一个特定的类 (moveModalBody)，然后我将它们移动到另一个地方（在我的情况下，头部中的一个 div，但也许在页脚或正文的末尾应该更好...)

<script>
/* MOVE modal body: 
    All HTML code with the class modalBodyToMove  (modal created in sql2html)
    must mouve in div identifier moveModalHere (div in the generic header)
    to move them out of everything (specially the HTML tables)
*/
var elements = document.querySelectorAll('.modalBodyToMove');
var classCount = elements.length;
console.log("Number of class modalBodyToMove: "+classCount);
if (classCount > 0){
    for(var i = 0; i < elements.length; i++) {
        document.getElementById('moveModalHere').appendChild(  elements[i] )
    }
}
</script>

当然，这个脚本是在页面末尾添加的（在所有模态体都添加之后）

注意：我添加了对总和的检查，以避免页面上没有模式时出现js错误^^

问题：我确实相信这个解决方案会影响我的页面速度（取决于浏览器和设备...）我已经在 github twitter/bootstrap 上打开了一个错误问题，但如果有人有一个更好的主意，我愿意测试提前谢谢你

【讨论】：