I utilized JavaScript to create a Bootstrap Modal and followed the correct classes as outlined in the Bootstrap documentation, but unfortunately, the JavaScript-created elements are not being affected.
Even after adding the Bootstrap classes and attributes using the "classList.add()" and "setAttribute()" methods, the DOM elements remain unaffected.
The<!DOCTYPE html>, <html lang="en">, and other tags have been properly included as follows:
<!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>
This is the JavaScript Code snippet-
export default function example() {
console.log("Working"); // To verify if the function is working correctly.
// Create the modal element
const modal = document.createElement("div");
modal.classList.add("modal");
modal.setAttribute("tabindex", "-1");
// Create the modal dialog element
const modalDialog = document.createElement("div");
modalDialog.classList.add("modal-dialog");
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");
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);
}