Question

`cell = '<div class="col-4"><div class="card" style="width: 18rem;">\
    <img class="card-img-top" src="products/'+thumb+ '" alt="Card image cap">\
<div class="card-body">\
    <h5 class="card-title">'+title+ '</h5>\
      <p class="card-text">'+cats+'</p>\
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Show More</button>\
    </div>\
</div></div>

另一页的代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">

    <div class="modal-body">
      <span id="message">Thank You </span>

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

请帮帮我。无论我尝试多少次，我的模态都没有显示出来。模态是否适用于bootstrap卡？无论我按下多少次按钮，模态都不显示。我的模态是在另一个HTML页面。这有问题吗？我使用visual studio代码

Answer 1

模式的HTML必须打开（或可用）到您正在调用它的页面，并希望它弹出。例如：

<html>
    <head>
         stylesheets
         bootstrap javascript libraries
    </head>
    <body>
          <h1>Welcome</h2>
          <section>
              Content ....

              <button>Open the modal!</button>
          </section>


          <footer></footer>


          <div class="modal">
              Put modal at bottom
          </div>
    </body>
</html>

然后，确保您链接到Bootstrap javascript文件和jQuery以使模式工作。 Bootstrap在https://www.bootstrapcdn.com/

处有一个方便的CDN链接

模态不起作用

1 个答案: