Bootstrap Modal 在iOS设备(iPhone/iPad)中无法正常弹出显示的问题及解决方法
<p>最近在用Bootstrap modal的时候，遇到了在iOS设备上无法正常显示的问题。</p><p>上网查了一下，在 Github 找到一个类似的问题。基本上是因为把 Modal组件放在responsive table中了，所以导致了一些问题。解决方案就是，把modal放在 Html Table tag (and bootstrap "table-responsive" class) 外面。</p>
<blockquote>
<p>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.</p>
</blockquote>
<br>
在iOS设备中不能正常显示的代码
<details>
<summary>点击查看代码</summary>
<pre><code><!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>
</code></pre>
</details>
<p>在iOS设备中能够正常显示的代码</p>
<details>
<summary>点击查看代码</summary>
<pre><code><!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>
</code></pre>
</details>
<br>
参考资料：
Bootstrap modal bugged only when open on iphone/ipad #31638 <br>
(https://github.com/twbs/bootstrap/issues/31638 "https://github.com/twbs/bootstrap/issues/31638")<br><br>
来源：https://www.cnblogs.com/passacaglia/p/17072308.html
頁:
[1]