Bootstrap 仅在 iphone/ipad 打开时出现模式错误

Question

当我打开 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 table 中。在下面的示例中，我们可以看到两个工作案例和一个与错误有关的案例：

    <!-- 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>

Answer 1

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

如果你有时间，我认为这对于在 bootstrap 的 @github 回购问题下提交可能是有效的，但是提交它的过程>实际上是在 cdn 或其他地方有点长，所以这就是为什么我会使用 modal-dialog-centered 或使用自定义 css 模态来定位你需要的位置

Answer 2

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

我在我的所有模态主体元素中添加了一个特定的 class (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 但如果有人有更好的主意，我愿意测试提前谢谢你

Bootstrap 仅在 iphone/ipad 打开时出现模式错误

Bootstrap modal bug when open ONLY on iphone/ipad

css

iphone

modal-dialog

popup

twitter-bootstrap