在桌面上,模式运行正常。但是,在移动设备上,模式会在后台后面启动,并且受表格(tbody
)边界的约束。
这里是模式触发器:
<a data-toggle="modal" href="" data-target="#choose-trainer-modal-<?= $id ?>" value="">예약 </a>
$id
正在循环运行,因为我需要为表中的每一行触发一个新的模态。
这里是模态,其中在触发器所在的同一循环内包含filename.php
:
<div class="modal fade" id="choose-trainer-modal-<?= $e->id ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Confirm your spot as a trainer</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="iportfolio">
<div class="portfolio-desc">
<h3><a href=""><?= t_db($e->event_title) ?></a></h3>
<span><a href="#"><?= $e->formatted_start_time . " - " . $e->formatted_finish_time; ?></a>, <a href="#"> <?= $e->event_location ?></a></span>
</div>
</div>
<p>
Choose one of the students on the waitlist.
</p>
如果将包含的模式代码移到循环外,则不会从触发器中调用它
对于移动设备,如何使模式出现在表格约束之外?
谢谢
在您的CSS中尝试:
.modal {
z-index: 1000;
}