Bootstrap关闭模式不起作用

Question

我这里有两个按钮用于关闭模态.第一个是关闭图标,另一个是取消按钮,都使用数据关闭来关闭模态.但是,它们都不起作用.我使用相同的代码为另一个模态,他们工作正常.任何猜测？

<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
    <div class="modal-dialog">
        <div id="timeSelectModalContent" class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <label>
                <input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
                <label class="checkbox-label">Thursday, 08:00 pm.</label>
            </label>
            <br>
            <label>
                <input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
                <label class="checkbox-label">Thursday, 09:30 pm.</label>
            </label>
            <div id="time-modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
            </div>
        </div>
    </div>
</div>

Answer 1

非常古老的话题,但它仍然首先出现在搜索这个问题的人身上,这可能是由于他们犯了同样的错误,我做的是没有确保模态div超出了它的主体div.要使用Material Kit作为示例,您应该仔细检查目标"#myModal"div是否在主容器的结束div标记之外.

<div class="main main-raised">
    <div class="container">
    <!--                 modals -->
        <div class="row" id="modals">
            <div class="col-md-6">
                <button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal">
                    Classic modal
                </button>
            </div>

        </div>
    <!--                 end modals              -->
    </div>
</div>

<!-- Classic Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">clear</i>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Hey hey</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-simple">Nice Button</button>
                <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--  End Modal -->

Answer 2

Bootstrap 5 问题摘要

你好。和其他人一样，这让我绊倒了。该线程已经跨越了很长一段时间，当然还有其他问题导致了该问题。然而，正如Alexandre Elshobokshy无意中提到的那样，改变

data-bs-dismiss

代替

data-dismiss

作品。我想指出这一点，因为它是正确的，但还需要更新其他键才能使 Modals 与 Bootstrap 和 HTML 5 配合使用。

HTML5改变了Bootstrap所需的标签。一种是 data-bs-dismiss。

其他的是：

data-bs-toggle & data-bs-target

我希望这对其他人有帮助！

Answer 3

我也被困在这个问题上一段时间。我不知道为什么，但是当我在课堂上使用data-bs-dismiss 而不是data-dismiss关闭按钮时，它对我有用。

请参阅以下关闭按钮的完整代码。

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

Answer 4

首先检查您是否在HTML中正确包含了bootstrap.js文件。

您可以尝试使用以下代码，并用-替换用于关闭模式的按钮标签-

<a href="#" class="close" data-dismiss="modal" aria-label="close">&times;</a>

如果仍然无法使用，请告诉我！

您可以在jQuery中的关闭按钮上添加点击事件。像这样-

$("#yourModal").modal("hide"); 

Answer 5

对我的情况有帮助的是，我用 data-bs-dismiss 替换了 data-dismiss，现在它可以工作了！

Answer 6

删除“淡入淡出”类。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

改成

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">