单击按钮时没有弹出引导模式

【问题标题】：Bootstrap Modal not popping up when clicking button单击按钮时没有弹出引导模式
【发布时间】：2020-12-22 10:07:09
【问题描述】：

当用户单击“类别”下的“添加”按钮时，我正在尝试添加模式。当我只使用 js fiddle 中的模态代码时，它可以工作，但是当我添加当前文件中的所有代码时，它不会。尝试移动 jquery cdn 并为模态创建一个单独的 div 容器，但无法获得它。任何帮助表示赞赏。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Inventory Management System</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
      integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
      integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
      crossorigin="anonymous"
    ></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <link
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <script type="text/javascript" src="./js/main.js"></script>
  </head>
  <body>
    <!-- Navbar -->
    <?php  include_once("./templates/header.php"); ?>
    <br /><br />
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card mx-auto">
            <img
              src="./images/user.png"
              style="width: 60%"
              class="card-img-top mx-auto"
              alt="Card image cap"
            />
            <div class="card-body">
              <h4 class="card-title">Profile Info</h4>
              <p class="card-text">
                <i class="fa fa-user">&nbsp;</i>Brian Liang
              </p>
              <p class="card-text"><i class="fa fa-user">&nbsp;</i>Admin</p>
              <p class="card-text">Last Login : xxxx-xx-xx</p>
              <a href="#" class="btn btn-primary"
                ><i class="fa fa-edit">&nbsp; </i>Edit Profile</a
              >
            </div>
          </div>
        </div>
        <div class="col-md-8">
          <div class="jumbotron" style="width: 100%; height: 100%">
            <h1>Welcome Admin,</h1>
            <div class="row">
              <div class="col-sm-6">
                <iframe
                  src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
                  frameborder="0"
                  width="160"
                  height="160"
                ></iframe>
              </div>
              <div class="col-sm-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">New Orders</h4>
                    <p class="card-text">
                      Here you can make new invoices and create new orders.
                    </p>
                    <a href="#" class="btn btn-primary">New Orders</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <p></p>
      <p></p>
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Categories</h4>
              <p class="card-text">
                Here you can manage your categories and can add parent and sub
                categories
              </p>
              <a
                href="#"
                data-toggle="modal"
                data-target="#exampleModal"
                class="btn btn-primary"
                >Add</a
              >
              <a href="#" class="btn btn-primary">Manage</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Brands</h4>
              <p class="card-text">
                Here you can manage your brand and can add a new brand
              </p>
              <a href="#" class="btn btn-primary">Add</a>
              <a href="#" class="btn btn-primary">Manage</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Products</h4>
              <p class="card-text">
                Here you can manage your products and can add new products
              </p>
              <a href="#" class="btn btn-primary">Add</a>
              <a href="#" class="btn btn-primary">Manage</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal -->
      <div class="row">
        <div
          class="modal fade"
          id="exampleModal"
          tabindex="-1"
          role="dialog"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">...</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>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

标签： html jquery modal-dialog bootstrap-modal popupwindow


【解决方案1】：

您使用的代码仅适用于Bootstrap 4，但在标题中，您包含更改了与modals 相关的一些参数的Bootstrap 5：

  • 触发模态：

     // OLD WAY
 data-toggle="modal"
 data-target="#exampleModal"
 // NEW WAY
 data-bs-toggle="modal"
 data-bs-target="#exampleModal"

  • 声明一个模态：

     <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
             ...
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             <button type="button" class="btn btn-primary">Save changes</button>
           </div>
         </div>
       </div>
     </div>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Inventory Management System</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
      integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
      integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
      crossorigin="anonymous"
    ></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <link
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <script type="text/javascript" src="./js/main.js"></script>
  </head>
  <body>
    <!-- Navbar -->
    <?php  include_once("./templates/header.php"); ?>
    <br /><br />
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card mx-auto">
            <img
              src="./images/user.png"
              style="width: 60%"
              class="card-img-top mx-auto"
              alt="Card image cap"
            />
            <div class="card-body">
              <h4 class="card-title">Profile Info</h4>
              <p class="card-text">
                <i class="fa fa-user">&nbsp;</i>Brian Liang
              </p>
              <p class="card-text"><i class="fa fa-user">&nbsp;</i>Admin</p>
              <p class="card-text">Last Login : xxxx-xx-xx</p>
              <a href="#" class="btn btn-primary"
                ><i class="fa fa-edit">&nbsp; </i>Edit Profile</a
              >
            </div>
          </div>
        </div>
        <div class="col-md-8">
          <div class="jumbotron" style="width: 100%; height: 100%">
            <h1>Welcome Admin,</h1>
            <div class="row">
              <div class="col-sm-6">
                <iframe
                  src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
                  frameborder="0"
                  width="160"
                  height="160"
                ></iframe>
              </div>
              <div class="col-sm-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">New Orders</h4>
                    <p class="card-text">
                      Here you can make new invoices and create new orders.
                    </p>
                    <a href="#" class="btn btn-primary">New Orders</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <p></p>
      <p></p>
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Categories</h4>
              <p class="card-text">
                Here you can manage your categories and can add parent and sub
                categories
              </p>
              <a
                href="#"
                class="btn btn-primary"
                        data-bs-toggle="modal" 
                data-bs-target="#exampleModal"
                >Add</a
              >
              <a href="#" class="btn btn-primary">Manage</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Brands</h4>
              <p class="card-text">
                Here you can manage your brand and can add a new brand
              </p>
              <a href="#" class="btn btn-primary">Add</a>
              <a href="#" class="btn btn-primary">Manage</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Products</h4>
              <p class="card-text">
                Here you can manage your products and can add new products
              </p>
              <a href="#" class="btn btn-primary">Add</a>
              <a href="#" class="btn btn-primary">Manage</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal -->
      <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
    </div>
  </body>
</html>

【讨论】：

    【解决方案2】：

    您可能混淆了您的引导程序版本。我已经使用 bootstrap 4 和 bootstrap 5 测试了您的代码，并且可以确认它适用于 bootstrap 4，但不适用于 bootstrap 5，您可以通过将 bootstrap 5 脚本导入替换为 bootstrap 4 来轻松修复您的代码，或者您可以将您的代码移植到引导程序 5.

    Bootstrap 5 最近更改了触发模式的方式，这就是它在 5 上不起作用但在 4 上起作用的原因。

    以下头像适合我

    <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Inventory Management System</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

    【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2021-03-05
    • 1970-01-01
    • 1970-01-01
    • 2015-03-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode