Bootstrap5 模态不显示

Question

我正在构建一个带有导航栏和 table 的简单网页。 table 行是从一个简单的 JS 脚本生成的，该脚本从数据库异步获取数据。为了方便起见，我决定使用 Bootstrap5，但我被卡住了，因为即使页面正确构建和显示，也没有显示模式。

每个 table 行都有一个带有两个按钮的最终 <td>：一个“丢弃行”按钮，用于从 table 中删除该行，另一个是更新按钮，它应该给我一个模式来编辑内容和更新数据库。

这是我得到的：

<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <title>My new page</title>
</head>
<body>
    <div class="container-fluid">

        <!-- Modal -->
        <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="updateModalLabel">Update</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                my modal
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>  

        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Oversonic</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#" onclick="reload()">Reload</a>
                  </li>
                </ul>
                <form class="d-flex">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
              </div>
            </div>
        </nav>

        <!-- Content -->
        <div class="row">
            <div class="col-lg-1"></div>
            <div class="col-lg-10" id="main-content">
              <div class="row my-3" id="header"><h2>Conversation logs:</h2></div>
              <div class="row" id="content">
                <table class="table table-hover" id="main-table">
                  <thead>
                    <tr>
                      <th scope="col">datetime</th>
                      <th scope="col">user:</th>
                      <th scope="col">response:</th>
                      <th scope="col">data</th>
                      <th scope="col">location/th>
                      <th scope="col">buttons</th>
                    </tr>
                  </thead>
                  <tbody id="loaded-content">
                    <!-- dynamically filled -->
                  </tbody>
                </table>
              </div>
            </div>
            <div class="col-lg-1"></div>
        </div>


    </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>  
  <script src="resources/loading-spinner.js"></script>
  <script src="resources/script.js"></script>
</body>
</html>

至于js，这些是功能：

const table_body = document.getElementById("loaded-content");

function populateTable (file) {
    // Populate the table with data from the file's rows
    file.forEach(row => {
        const new_row = document.createElement("tr");
        for (const key in row) {
            const new_td = document.createElement("td");
            if (key == "timestamp") {
                new_td.textContent = new Date(row[key]).toDateString();
            } else {
                new_td.textContent = row[key];
            }
            new_row.appendChild(new_td);
        }
        // Create buttons: update and discard
        const btn_update = document.createElement("button");
        const btn_discard = document.createElement("button");
        const updateButton = addTextandAttributes(btn_update, "<img src=\"resources/cloud-plus-fill.svg\"></img>", {"type":"button", "class":"btn btn-outline-info btn-sm mt-1 me-2", "data-toggle": "modal", "data-target": "#updateModal"});
        const discardButton = addTextandAttributes(btn_discard, "<img src=\"resources/x-circle.svg\"></img>", {"type": "button", "class":"btn btn-outline-dark btn-sm mt-1", "onclick": "deleteRow(this)"});
        // Create cell to store buttons and append it to each row
        const buttonsCell = document.createElement("td");
        buttonsCell.appendChild(updateButton);
        buttonsCell.appendChild(discardButton);
        new_row.appendChild(buttonsCell);
        table_body.appendChild(new_row);
    });
}

function deleteRow(element) {
    try {
        const idx = element.rowIndex
        var row = element.parentElement.parentElement
        console.log(row)
        table_body.deleteRow(idx)
    } catch (error) {
        console.log(`Could not delete row! (${error})`)
    }
    
}

这是示例行的图片：

删除行按钮按预期工作。这里的问题是，当我单击更新按钮时，没有任何反应，即使我将模态的 id 添加到按钮中的 aria 属性（正如您从 js populateTable 函数中看到的那样。

Answer 1

不要忘记 data- 属性在 Bootstrap 5.

中更改为 data-bs-

动态创建按钮时，设置正确的属性：

const updateButton = addTextandAttributes(btn_update,
"<img src=\"resources/cloud-plus-fill.svg\"></img>", { 
  "type":"button",
  "class":"btn btn-outline-info btn-sm mt-1 me-2",
  "data-bs-toggle": "modal", 
  "data-bs-target": "#updateModal"
});

Demo

Bootstrap5 模态不显示

Bootstrap5 modal not showing

html

javascript

bootstrap-modal

bootstrap-5