JavaScript创建的Bootstrap Modal样式不生效问题求助

核心问题1：Bootstrap CSS引入不完整 #

你当前引入的bootstrap-grid.min.css仅包含Bootstrap网格布局相关样式，Modal、按钮等组件的核心样式并不在其中，这是样式不生效的主要原因。

核心问题2：Modal未设置匹配的ID #

触发按钮的data-bs-target="#exampleModal"指定了目标Modal的ID，但你动态创建的Modal元素缺少这个ID，导致Bootstrap无法关联触发按钮和Modal。

额外问题：函数未执行 #

你的example函数是默认导出的，但没有看到调用代码，需要确保函数被执行才能生成Modal元素。

修改步骤 #

1. 替换Bootstrap CSS文件

将HTML中的网格CSS替换为完整的Bootstrap CSS：

<!-- 替换原有的bootstrap-grid.min.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. 给Modal添加目标ID

在JavaScript创建Modal的代码中添加id="exampleModal"：

const modal = document.createElement("div");
modal.classList.add("modal");
modal.setAttribute("tabindex", "-1");
modal.setAttribute("id", "exampleModal"); // 新增这一行

3. 确保函数被调用

在你的index.js中导入并执行example函数：

import example from './your-module-file.js'; // 替换为实际的文件路径
example();

4. 优化按钮类添加（可选）

可以合并类名添加，让代码更简洁：

// 替换原saveButton的类添加代码
const saveButton = document.createElement("button");
saveButton.classList.add("btn", "btn-primary"); // 合并添加btn和btn-primary
saveButton.setAttribute("type", "button");
saveButton.setAttribute("data-bs-dismiss", "modal");
saveButton.innerHTML = "Save";

完成以上修改后，点击addTask按钮，Modal就能正常显示样式并触发功能了。

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