引导关闭模式不起作用

Question

我这里有两个按钮用于关闭模式。第一个是关闭图标，另一个是取消按钮，两者都使用 data-dismiss 来关闭模式。但是，它们都不起作用。我对另一个模态使用相同的代码，它们工作正常。有什么猜测吗？

 <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>

原文由 NoorUllah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Colmofarrell 发布，翻译遵循 CC BY-SA 4.0 许可协议