javascript - 在视频顶部显示模态
问题描述
模态是否可以在视频元素之上?我的应用程序类似于视频教程,我在特定时间提出了一个弹出问题。它目前正在工作,但我的问题是,如果用户在最大化状态下观看视频将暂停但不会出现我的模式。
这是我目前的模式:
<div id="popQuestModal" class="modal" data-keyboard="false" data-backdrop="static">
<form class="modal-content" id="quistionnaire">
<div class="container">
<h1 id="popQuestion" style="text-align:center">. . .</h1>
<hr>
<div id="packageOption1" class="form-check form-check-inline" style="margin-top:20px;">
<input type="radio" class="form-check-input" id="radOption1" name="choice" style="width:2em; height:2em">
<label id="popOption1" class="form-check-label" for="materialInline1" style="font-size:20px"></label>
</div>
<div id="packageOption2" class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="radOption2" name="choice" style="width:2em; height:2em">
<label id="popOption2" class="form-check-label" for="materialInline2" style="font-size:20px"></label>
</div>
<div id="packageOption3" class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="radOption3" name="choice" style="width:2em; height:2em">
<label id="popOption3" class="form-check-label" for="materialInline3" style="font-size:20px"></label>
</div>
<div id="packageOption4" class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="radOption4" name="choice" style="width:2em; height:2em">
<label id="popOption4" class="form-check-label" for="materialInline3" style="font-size:20px"></label>
</div>
<label id="correctAnswer" style="display:none"></label>
<hr>
<h3 id="displayCorrect" style="text-align:right"></h3>
</div>
</form>
</div>
任何建议/评论 TIA。
解决方案
在 CSS 中将模态的 z-index 更改为更高的数字。
推荐阅读
- c - 解析主机地址的程序中的 Memset 函数
- google-cloud-platform - 如何在不重新部署的情况下更新 Google Cloud Function 的运行时环境变量?
- python - python 函数的模板,它创建了输入的修改版本,但不修改输入
- php - 在 Laravel 中使用多态关系在数据库中存储重复值的问题
- arrays - How could I pick out specific range of data from an array in C?
- blazor-server-side - Blazor - 编辑时不保存预设输入值
- ios - Flutter 项目 - 测试从生产应用程序到 Dev 甚至 TestFlight 应用程序的通用链接不起作用,但 Dev to Dev 工作得很好
- javascript - 如何使用html中的href传递输入字段值?
- huawei-developers - 显示 HMS Core 升级提示
- javascript - 验证空单元格Angular Xlsx文件