模态不起作用答案

【问题标题】：Modal Does Not Work模态不起作用
【发布时间】：2018-06-27 23:04:46
【问题描述】：

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

请帮助我。无论我尝试多少次，我的模态都不会显示。模态是否适用于引导卡？无论我按下按钮多少次，模式都不会显示。我的模态在另一个 html 页面中。有问题吗？我正在使用 Visual Studio 代码

【问题讨论】：

你为什么希望另一个页面中的东西首先打开？
详细说明：“在另一个页面中”是什么意思？你包括什么JavaScript？当页面加载或触发模式触发器时，您的控制台中是否出现任何错误？
请更新您的代码，使其更完整甚至更好：添加 jsbin.com/?html,output 示例

标签： javascript jquery html css twitter-bootstrap

【解决方案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 有一个方便的 CDN 链接https://www.bootstrapcdn.com/

【讨论】：