首页 > 解决方案 > 在视频顶部显示模态

问题描述

模态是否可以在视频元素之上?我的应用程序类似于视频教程,我在特定时间提出了一个弹出问题。它目前正在工作,但我的问题是,如果用户在最大化状态下观看视频将暂停但不会出现我的模式。

这是我目前的模式:

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

标签: javascripthtml

解决方案


在 CSS 中将模态的 z-index 更改为更高的数字。


推荐阅读