如何用纯JavaScript替换jQuery show()打开Bootstrap 4模态框？

嘿，我懂你现在的头疼点——直接改style.display或者visibility确实搞不定Bootstrap 4的模态框，这是因为Bootstrap的模态框不是普通的隐藏元素，它依赖一套自己的CSS类和内置JS逻辑来完成显示、遮罩、滚动锁定这些完整的交互，不是简单把元素显示出来就行～

正确的做法：用Bootstrap原生JS API #

Bootstrap 4已经提供了原生JS的模态框操作方法，不用自己手动折腾样式，步骤很简单：

1. 获取模态框DOM元素
2. 创建Bootstrap模态框实例
3. 调用实例的show()方法

代码示例：

// 获取你的模态框元素
const signupModal = document.getElementById('signup-box');
// 初始化Bootstrap模态框实例
const modalInstance = new bootstrap.Modal(signupModal);
// 打开模态框
modalInstance.show();

为什么之前的方法没用？ #

Bootstrap模态框显示时，会做一堆你看不到的操作：

• 给模态框元素添加show类，同时设置display: block
• 在页面中插入一个半透明的背景遮罩元素（带modal-backdrop show类）
• 给<body>添加modal-open类，锁定页面滚动
• 触发show.bs.modal等相关事件

你之前直接改style.display只完成了其中最表层的一步，漏掉了其他关键操作，所以模态框要么没完全显示，要么没有交互效果。

（不推荐）手动模拟Bootstrap的操作 #

如果你不想用官方API，非要手动实现，得把所有细节都补上，但这种方法容易出问题（比如关闭时还要手动移除遮罩和类），代码大概是这样：

const signupModal = document.getElementById('signup-box');
// 显示模态框并添加类
signupModal.classList.add('show');
signupModal.style.display = 'block';
// 创建并添加背景遮罩
const backdrop = document.createElement('div');
backdrop.classList.add('modal-backdrop', 'show');
document.body.appendChild(backdrop);
// 锁定body滚动
document.body.classList.add('modal-open');

还是强烈建议用官方的bootstrap.Modal实例方法，省心又不容易出错～

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