twitter-bootstrap - bootstrap：从 show.bs.modal 事件中抑制模式

Question

是否可以通过从事件中向框架返回false来告诉引导程序不显示模式？show.bs.modal

编辑：

使用 stopPropagation() 或只是disable一个按钮不是我想要的。我想处理事件内部 show.bs.modal的逻辑。因为显示/隐藏模式是一个动态的决定。

当然$('#modal').show()，如果这是唯一的方法，则可以在事件之外执行此逻辑并以编程方式调用 。

标签： twitter-bootstrap

Answer 1

2021 年 6 月 23 日 — 更新答案

最初提出此问题时（2021 年 5 月 13 日），无法从show.bs.modal事件处理程序中多次阻止模式显示。

这是因为从 V4.0.0 到 V5.0.1 的所有 Bootstrap 版本都存在错误（V3 没有问题）。提交了概述问题的问题报告，并创建了V4和V5的拉取请求。

使用 Bootstrap V5.0.2，问题已得到修复，如下所示的片段。event.preventDefault()响应事件返回（对于 V5.0.2 及更高版本）show.bs.modal将阻止显示模式。不返回preventDefault()响应后续事件将显示模式。

var modalCheckbox = document.getElementById('modalSwitch');
var modalCheckboxLabel = document.getElementById('modalLabel');
var modalPreventDefault = false;
var myModal = document.getElementById('myModal');

modalCheckbox.addEventListener('change', (event) => {
    if (event.currentTarget.checked) {
        modalPreventDefault = false;
        modalCheckboxLabel.innerHTML = 'Modal Enabled';
    } else {
        modalPreventDefault = true;
        modalCheckboxLabel.innerHTML = 'Modal Disabled';
    }
});

myModal.addEventListener('show.bs.modal', (event) => {
    console.log('Modal: ' + modalPreventDefault);
    if (modalPreventDefault === true) {
        return event.preventDefault();
    }
});

li {
    margin-bottom: 0.375rem;
}

code {
    font-size: 1em;
}

.btn {
    width: 11rem;
}

.form-switch .form-check-input {
    cursor: pointer;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

<div class="container mt-5">
    <h2 class="text-center">Bootstrap <code>show.bs.modal</code> test case &ndash; V5.0.2</h2>
    <div class="row justify-content-evenly">
        <div class="col-6 col-md-4 col-lg-3">
            <h3>Modal demo</h3>
            <div class="form-check form-switch mb-3">
                <input id="modalSwitch" class="form-check-input" type="checkbox" checked autocomplete="off">
                <label id="modalLabel" class="form-check-label font-italic" for="modalSwitch">Modal Enabled</label>
            </div>
            <!-- Button trigger modal -->
            <button id="modalButton" class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#myModal">
                Show Modal
            </button>
        </div>
    </div>
</div>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-sm-11 col-md-9 col-lg-7">
            <h3>Bootstrap Issue &mdash; Resolved</h3>
            <p><a href="https://github.com/twbs/bootstrap/issues/34055" title="Put real link here!">Issue:</a> Modal event.preventDefault() for show.bs.modal: disables modal with fade class from being displayed again in V4 & V5 (up to V5.0.1).</p>
                
            <p>The JavaScript for Bootstrap V4 & V5 (up to V5.0.1) stopped a modal from being displayed again, once displaying the modal has been prevented using <code>event.preventDefault()</code>.</p>
            <p>The problem has been corrected in V5.0.2.</p>
            <ul>
                <li>A listener is attached to listen for the <code>show.bs.modal</code> event.</li>
                <li>The checkbox switch setting allows or prevents the modal to be displayed:
                    <ul>
                        <li>If the checkbox is checked (Modal Enabled), the listener does nothing and the modal is displayed.</li>
                        <li>If the checkbox is un-checked (Modal Disabled), the listener returns <code>event.preventDefault()</code> and nothing is displayed.</li>
                    </ul>
                </li>
            </ul>
                <p>In previous Bootstrap V5 versions (&amp; V4), re-checking the checkbox (re-enabling) did not enable the modal to again be displayed after the modal was disabled. The <code>event.preventDefault()</code> now works as expected.</p>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="myModalLabel" class="modal-title">Modal title</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

V4.6.1 版本的拉取请求在等待处理的队列中，但目前仍在等待。