单击时未显示模式 window

Question

我是 Bootstrap 和 jQuery 的新手，我正在尝试在我的销售网站中集成模式 window。我从 https://getbootstrap.com/docs/4.3/components/modal/ 复制了模态代码，以测试它在我的项目中的外观；唯一的问题是，每当我单击模态按钮时，什么都不会出现。我听说这可能是 jQuery 没有加载到我的代码中的问题，但我不知道该怎么做，或者这是否是一个问题。这是我的代码：

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="Project2-2.css" type="text/css">

    <title></title>
  </head>
  <body>
    <!-- Small screen -->

    <!-- Header -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6 bg-info">
          <br>
          <a href="#" class="my-auto">Wand Shoe Reviver</a>
        </div>
        <div class="col-sm-6 bg-secondary">
          <br>
          <a href="#" class="iconcont" id="img1cont">
            <img src="/Users/mauriceaugust/Documents/Project 2/2931147_user_face_avatar_account_head_icon.png" class="img-fluid" alt="">
          </a>
          <a href="#" class="iconcont">
            <img src="/Users/mauriceaugust/Documents/Project 2/2561381_search_icon.png" class="img-fluid" alt="">
          </a>
          <a href="#" class="iconcont">
            <img src="/Users/mauriceaugust/Documents/Project 2/2703085_bag_cart_ecommerce_shop_icon.png" class="img-fluid" alt="">
          </a>
        </div>
      </div>
    </div>
    <br>

    <!-- Hero image -->
    <div class="container-fluid heroimage">
      <div class="row">
        <div class="col-sm-12 bg-danger">
          <img class="img-fluid" src="/Users/mauriceaugust/Documents/Project 2/leather-air_jordan_1-2-min_2048x-copy.jpeg" alt="">
          <p id="herotext">To Scrub or Not to Scrub? Read more about this heated debate in the Wizard Circle.</p>
        </div>
      </div>
      </div>
    </div>
    <br>
  <!-- Other img -->
  <div class="container-fluid additionalimage">
    <div class="row">
      <div class="col-sm-12">
        <img class="img-fluid" src="/Users/mauriceaugust/Documents/Project 2/1489e901-49a2-42f5-8f5a-fa2afc73f369.92c49142211f2246ea56c38b805f46f1.jpeg" alt="">
        <p class="additonalimgtext">The Tools of the Trade - Get the ultimate kit now!</p>
      </div>
    </div>
  </div>
  <br>
  <!-- Items to buy -->
  <h1 class="eco-friendlyh1">Cleaners</h1>
  <p class="eco-friendlyp">Eco-friendly, concentrated cleaners for your most calling cleaning needs</p>
  <div class="container-fluid itemstobuycont">
    <div class="row">
      <div class="col-sm-4">
        <img src="/Users/mauriceaugust/Documents/Project 2/Sole-Revive-PDP-1.jpeg" alt="Sole Reviver" class="img-fluid">
        <p>Potion no1 Wipes - </p>
        <p></p>

      </div>
      <div class="col-sm-4">
        <img src="/Users/mauriceaugust/Documents/Project 2/Wipes.jpeg" alt="Cleaning Wipes" class="img-fluid">
      </div>
      <div class="col-sm-4">
        <img src="/Users/mauriceaugust/Documents/Project 2/Cleaningrag.jpeg" alt="Cleaning Rag" class="img-fluid">
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4">
        <img src="/Users/mauriceaugust/Documents/Project 2/pwtw-bleach-1.jpeg" alt="Bleach" class="img-fluid">
      </div>
      <div class="col-sm-4">
        <img src="/Users/mauriceaugust/Documents/Project 2/Detergent.jpeg" alt="Detergent" class="img-fluid">
      </div>
      <div class="col-sm-4">
        <img src="/Users/mauriceaugust/Documents/Project 2/sneaker-laundry-bag.jpeg" alt="Laundry-Bag" class="img-fluid">
      </div>
    </div>
  </div>

  <!-- Test modal -->

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <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>
  <br>
  <br>
  <br>
  <br>
  <br>
  
  <!-- Footer -->
  <div class="container-fluid footercontainer">
    <div class="row">

    </div>
  </div>
    


    <script type="text/javascript" src="project2-2.js">
    </script> -->
  </body>
</html>

CSS

@font-face {
  src: url("/Users/mauriceaugust/Downloads/vampire-calligraphy-font/VampireCalligraphy-GgoA.ttf");
  font-family: vampire;
}

*{
  box-sizing: border-box;
  --primary-color: #fe7e6d;
  --secondary-color: #4C0070;
  --main-font: "GTWalsheim","Arial";
  font-family: var(--main-font);
}
html, body{
  height: 100%;
}

/* Header */
.container-fluid{
  border: solid black;
  height: 10%;
}
.align-middle{
  border: solid black;
}
.row{
  height: 100%;
}
.my-auto{
  border: solid black;
  color: white;
  font-size: 1.3em;
}
.col-sm-6{
  height: 100%;

}
.iconcont{
  display: inline-block;
  width: 30px;
  height: 27px;
  border: solid black;

  margin-left: 6%;

}

.iconcont img{
  height: 100%;
  width: 100%;
}

#img1cont{
  margin-left: 120px;
}

/* Hero image */
.heroimage, .additionalimage{
  height: 40%;
}
.col-sm-12{
  height: 100%;
}
.col-sm-12 img{
  height: 100%;
  width: 100%;
}
#herotext, .additonalimgtext{
  position: absolute;
  border: solid black;
  top: 0%;
  background-color: white;
  width: 40%;
  left: 30%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 1%;
}

/* Items to buy*/
.itemstobuycont{
  height: 60%;
}
.itemstobuycont .row{
  border: solid red;
  height: 50%;
}
.eco-friendlyh1, .eco-friendlyp{
  text-align: center;
}
.col-sm-4{
  border: solid black;
  text-align:center;
}
.col-sm-4 p{
  font-size: 0.5em;
  border: solid black;
  display: inline-block;
}
/* Footer */
.footercontainer{
  height: 20%;
}

Answer 1

您只导入了 Bootstrap 4.

的 CSS

模态也使用Javascript。

因此，需要导入Bootstrap4的JS以及jQuery和Popper

在导入项目的 js 文件之前，将以下行添加到您的代码中。

<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>

单击时未显示模式 window

Modal window not appearing on click

html

css

bootstrap-modal

bootstrap-4