html - 如何让模态在html和css中重叠div?
问题描述
我有一个模态但它与另一个 div 重叠如何解决这个问题?截图图像附在下面
我想在单击按钮时显示模态
但是有一个浮动菜单栏并且它与显示的模态重叠如截图
我的模态代码是
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<table class="table table-dark text-center" style="width: 100%;height: 100%">
<tr>
<td colspan="2" rowspan="2" style="width: 50%">
<iframe
class="embed-responsive-item card-img-top"
src=""
id="mLink"></iframe>
</td>
<td class="align-middle">
<span id="mStandard"></span>th
</td>
<td class="align-middle">
<span id="mMedium"></span>
</td>
</tr>
<tr>
<td class="align-middle">
<span id="mSubject"></span>
</td>
<td class="align-middle">
<span id="mChapter"></span>
</td>
</tr>
<tr>
<td colspan="2" style="width: 50%">
Teacher's Actions:<br> <span id="mTeacher"></span>
</td>
<td colspan="2" style="width: 50%">
Student's Actions:<br><span id="mStudent"></span>
</td>
</tr>
<tr>
<td colspan="2">
<a href="#" class="btn btn-primary" target="_blank"
id="mVideo">Watch Video</a>
</td>
<td colspan="2">
<button type="button" class="btn btn-danger"
data-dismiss="modal">Close</button>
</td>
</tr>
</table>
</div>
</div>
</div>
解决方案
只需增加 modal 的 z-index 即可。您可以尝试类似 z-index:9999999 以确保解决它。
顺便说一句,您不应该使用表格对布局进行编码。这似乎更容易,但随着时间的推移,代码变得肮脏且难以维护。
推荐阅读
- apache-kafka - 查找最后 5 分钟的页面浏览量
- php - WORDPRESS:如何一次以编程方式将现有页面添加到导航菜单
- amazon-web-services - 如何使用 s3 存储数据?
- sql - 如何使用外键获取表的多个值?
- javascript - 如何在不同的屏幕尺寸上获得相同的 scrollY 高度数?
- scala - 什么是 ev.R 型?
- excel - 不仅通过值更改(还有颜色等...)刷新 VBA 函数
- amazon-web-services - 我可以将 gamelift 与 node.js 服务器一起使用吗?
- function - BE_HTTP_GET_File 返回文本
- docker - docker-compose:记录到持久文件