Question

我正在使用Django和Bootstrap，并且模态窗口有问题。我有一个表，在其中我有一列，其中单元格是模态窗口的链接。然后，模态窗口应显示与您选择的单元格相关的另一个表格。

问题是我试图将模态div保留在for循环中，因为这就是我如何确定单击了哪一行表。我已经阅读了一些关于模态的内容，看到其他人在他们的模态div位于表格标签内时有问题，所以我认为这是我的问题可能来自的地方。

此刻，主表格正确显示，当我按预期点击单元格时，模态窗口会打开。它正确地从for循环中获取信息。

但是，当我在模态div中放置一个表时，它不会显示在模态窗口中，它会在主表下面显示模态是否已被激活。然后，模态窗口仅显示带有空体的页眉和页脚。如果我摆脱模态中的表并使用类似p的东西而不是它可以工作，但我更喜欢使用该表。

如果我将模态div移动到它所在的位置之外，那么它就可以使用模态窗口中的表，但问题是我需要在for循环中使用它，因为这就是我知道该表的哪一行被点击的方式。

任何人都可以告诉我，有没有比我正在做的更好的方法，比如根据可能的行选择传递变量，或者是否有办法将模态div保持在原来的位置并仍然在模态窗口中显示表格？

HTML在下面。

<table class="weekly table-hover main-manager-display" style="text-align: center; width: 100%">
    <thead>
    </thead>
    <tbody style="color: white">
        {% for week in team_selection %}
            <tr>
                {% for item in week|slice:":10" %}
                    <td>{{ item }}</td>
                {% endfor %}
                <td><a data-toggle="modal" href="#maxModal" style="color: white">{{ week.10 }}</a></td>
                <td>{{ week.11 }}</td>
            </tr>
            <div class="modal fade" id="maxModal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content" style="background-color: #c4dfe6">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title" style="text-align: center; color: #1c4d66">Week {{ week.0 }} Best Possible Team</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table modal-table">
                                <thead>
                                    <tr>
                                        <th>Position</th>
                                        <th>Player</th>
                                        <th>Points</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Test1</td>
                                        <td>Test2</td>
                                        <td>Test3</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn" data-dismiss="modal" style="background-color: #c4dfe6; color: #1c4d66">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </tbody>
</table>

Answer 1

为了将来参考，我使用下面的代码作为<table>标记的替代方法来实现此目的。

<style>
.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
</style

<div class="modal-body">
    <div class="table">
        <div class="row">
            <div class="cell"></div>
        </div>
    </div>
</div>

Bootstrap - 表内模态表

1 个答案: