如何在show.bs.modal事件中隐藏Bootstrap模态框？

问题根源 #

• 在show.bs.modal事件中调用hide()无效，是因为该事件触发时模态框的显示流程已启动，hide()无法中断默认的显示逻辑
• 改用shown.bs.modal事件时，模态框已完成渲染并显示，此时调用hide()会先显示再隐藏，导致视觉上的闪烁

正确解决方案 #

直接在show.bs.modal事件中阻止默认行为，从根源上终止模态框的显示流程，无需调用hide()：

let order_modal = document.getElementById('order');

order_modal.addEventListener('show.bs.modal', function (e) {
    e.preventDefault();
}, false);

原理说明 #

show.bs.modal是模态框即将显示前触发的事件，此时调用e.preventDefault()会直接阻断Bootstrap内部的模态框初始化及渲染流程，既不会出现无效问题，也不会产生闪烁现象。

内容的提问来源于stack exchange，提问作者MAXiDROME