我如何通过在移动设备上工作的表格内的循环触发模态?

问题描述 投票:0回答:1

在桌面上,模式运行正常。但是,在移动设备上,模式会在后台后面启动,并且受表格(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">&times;</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>

如果将包含的模式代码移到循环外,则不会从触发器中调用它

对于移动设备,如何使模式出现在表格约束之外?

谢谢

javascript php bootstrap-4
1个回答
0
投票

在您的CSS中尝试:

.modal {
  z-index: 1000;
}
© www.soinside.com 2019 - 2024. All rights reserved.