单击按钮后,我将显示一个引导程序模态。单击按钮时,模态即将到来,但是当我在浏览器中检查元素时,由于我的代码正在使用不需要的CSS,我可以再看到一个带有“模态背景”类的div。(opacity:0.5)。
<div class="flex-row">
<div class="flex-col-img">
<img class="img-bot" src="images/chatrobo.png">
</div><div class="flex-col-callout">
<div class="card bg-light callout">
<div class="card-body">
<p>I am not able to understand your response. Please type (Yes/No).</p>
<div class="flex-col-fb1" id="72609">
</div>
<div class="flex-col-fb2" id="feedbackArea">
<img src="images/like.png" class="user-feedback" id="like" onmouseout="changeImage(this, 'like.png')" onmouseover="changeImage(this, 'likegreen.png')" onclick="likeQuery(72609)"><img src="images/dislike.png" class="user-feedback" id="dislike" onclick="dislikeClicked()" data-toggle="modal" data-target= #myModal ">
</div>
</div>
</div>
</div>
</div>
上层div使用javascript动态显示
我在页脚后的最后一页保留模式div
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="modal-body">Modal body..</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>