我使用JavaScript创建了Bootstrap Modal，并使用了Bootstrap文档中提到的适当类，但它不影响JavaScript创建的元素。
我使用"classList.add()"one_answers"setAttribute()";方法，但它不影响DOM元素。
并且标签被正确添加<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.min.css" integrity="sha512-JQksK36WdRekVrvdxNyV3B0Q1huqbTkIQNbz1dlcFVgNynEMRl0F8OSqOGdVppLUDIvsOejhr/W5L3G/b3J+8w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js" defer integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./index.js" defer type="module"></script>
</head>
<body>
<div id="main">
<div id="Open" class="block">
<h2 class="block-heading">Open</h2>
</div>
<div id="In-Progress" class="block">
<h2 class="block-heading">In Progress</h2>
</div>
<div id="In-Review" class="block">
<h2 class="block-heading">In Review</h2>
</div>
<div id="Done" class="block">
<h2 class="block-heading">Done</h2>
</div>
</div>
<div type="button" id="addTask" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="fa-solid fa-circle-plus"></i>
</div>
</body>
</html>
这是JavaScript代码-
export default function example() {
console.log("Working"); // To check func is working properly.
// Create the modal element
const modal = document.createElement("div");
modal.classList.add("modal");
modal.setAttribute("tabindex", "-1");
// modal.setAttribute("role", "dialog");
// Create the modal dialog element
const modalDialog = document.createElement("div");
modalDialog.classList.add("modal-dialog");
// modalDialog.classList.add("modal-sm");
modal.appendChild(modalDialog);
// Create the modal content element
const modalContent = document.createElement("div");
modalContent.classList.add("modal-content");
modalDialog.appendChild(modalContent);
// Create the modal header element
const modalHeader = document.createElement("div");
modalHeader.classList.add("modal-header");
modalContent.appendChild(modalHeader);
// Create the close button and add it to the header
const closeButton = document.createElement("button");
closeButton.classList.add("btn-close");
closeButton.setAttribute("type", "button");
closeButton.setAttribute("data-bs-dismiss", "modal");
closeButton.setAttribute("aria-label", "close");
// closeButton.innerHTML = "×";
modalHeader.appendChild(closeButton);
// Create the modal title and add it to the header
const modalTitle = document.createElement("h4");
modalTitle.classList.add("modal-title");
modalTitle.innerHTML = "Modal Header";
modalHeader.appendChild(modalTitle);
// Create the modal body element
const modalBody = document.createElement("div");
modalBody.classList.add("modal-body");
modalContent.appendChild(modalBody);
// Add content to the modal body
const modalBodyContent = document.createElement("p");
modalBodyContent.innerHTML = "This is a small modal.";
modalBody.appendChild(modalBodyContent);
// Create the modal footer element
const modalFooter = document.createElement("div");
modalFooter.classList.add("modal-footer");
modalContent.appendChild(modalFooter);
// Create the close button and add it to the footer
const closeButton2 = document.createElement("button");
closeButton2.classList.add("btn");
closeButton2.classList.add("btn-secondary");
closeButton2.setAttribute("type", "button");
closeButton2.setAttribute("data-bs-dismiss", "modal");
closeButton2.innerHTML = "Close";
const saveButton = document.createElement("button");
saveButton.classList.add("btn-primary");
saveButton.setAttribute("type", "button");
saveButton.setAttribute("data-bs-dismiss", "modal");
saveButton.classList.add("btn");
saveButton.innerHTML = "Save";
modalFooter.appendChild(closeButton2);
modalFooter.appendChild(saveButton);
// Append the modal to the body of the page
document.body.appendChild(modal);
}
不要在css链接标签中使用bootstrap-grid，您可能希望将其重命名为bootstrap，以便您可以找到您想要使用的类。