bootstrap：从 show.bs.modal 事件中抑制模态

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>