Css 仅在iphone/ipad上打开引导模式错误
当我打开引导模式时，我发现iphone（和ipad）上有一个非常奇怪的错误。 黑色（半透明）背景显示良好，但模式不显示。没有可见内容，用户被阻止 我正在使用以下库：Css 仅在iphone/ipad上打开引导模式错误,css,iphone,twitter-bootstrap,modal-dialog,popup,Css,Iphone,Twitter Bootstrap,Modal Dialog,Popup,当我打开引导模式时，我发现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
<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>
<!-- 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">←</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>
调试弹出窗口
调试弹出窗口
工作案例#1：直接在HTML根代码中显示按钮和模式内容
需方联合国会计准则
要求公平
×
需求方：
布拉布拉布拉（示例）
类型：
例子
demande的详细信息：
阿约特
➕
环空器⨯
工作案例2：按钮在表中，但内容在表外
记忆
ssj（ssj）
接触器
接触器
×
- 电邮：
- 便携式：
- 不和：0999897
- 地址邮政：
费尔默
错误案例：打开模式按钮，内容在表内
记忆
ssj（ssj）
接触器
接触器
×
- 电邮：
- 便携式：
- 不和：976575
- 地址邮政：
费尔默
模态对话框中心类，因为它看起来像iphone Posite
<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>