引导模式弹出窗口根本不显示答案

【问题标题】：bootstrap modal popup does not show at all引导模式弹出窗口根本不显示
【发布时间】：2017-09-28 11:26:30
【问题描述】：

我是 bootstrap 新手，我似乎无法让我的模式正常工作。我的数据目标 =“#details-1”。可能是什么问题。我试图找到它几天无济于事。在此先感谢。这是代码

        <!--header tags-->
        <html>
        <head>
        <title>m-kibanda</title>
          <link rel="stylesheet" href="css/bootstrap.min.css">
          <link rel="stylesheet" href="css/bootstrap-grid.css">
          <link rel="stylesheet" href="css/flexboxgrid.css">
           <link rel="stylesheet" href="css/main.css">
          <meta name="viewport" content="width=device-width, initial-scale=1, 
          user-scalable=no">
          <script 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
         </script>
          <script src="js/bootstrap.min.js"></script>
          <script src="js/bootstrap.js"></script>
        </head>
        <!--my modal-->
        <div class="modal fade details-1" id="details-1" tabindex="-1" 
        role="dialog" aria-labelledby="details-1" aria-hidden="true">
           <div class="modal-dialog modal-lg">
             <div class="modal-header">
               <button class="close" type="button" data-dismiss="modal" aria-
        label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
              <h4 class="modal-title text-center">Cabbages</h4>
             </div>
             <div class="modal-body">
               <div class="container-fluid">
                  <div class="row">
                    <div class="col-sm-6">
                     <div class="center-block">
                       <img src="images/New Folder/JPEG/11.jpg" alt="Cabbages" 
        class="details img-responsive">
                     </div>
                   </div>
                   <div class="col-sm-6"></div>
                 </div>
               </div>
             </div>
           </div>
         </div>

【问题讨论】：

标签： jquery bootstrap-modal

【解决方案1】：

您缺少以下属性data-toggle="modal" data-target="#details-1"。这些是特定于引导程序的，并告诉 bootstrap.js 脚本打开模式/要定位的元素。

.img-responsive {
    margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#details-1"> Details</button>

<!-- Modal -->
<div id="details-1" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title text-center">Cabbages</h4>
      </div>
      <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-6">
               <div class="center-block text-center">
                 <img src="http://www.rivieraproduce.eu/wp-content/uploads/2011/06/image_riviera_savoy_cabbage.jpg" alt="Cabbages" 
  class="details img-responsive">
               </div>
             </div>
             <div class="col-sm-6"></div>
           </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

【讨论】：

很抱歉，我忘了在我的问题中包含按钮。我有它
我用上面评论中给出的按钮标记更新了示例。上述解决方案是否回答了您的问题？
它确实响应了！谢谢加载。我刚刚使用了您的头部标签，并且代码响应了。猜猜我的头部标签有问题
现在的问题是每次我重新加载页面时，即使没有点击模式按钮，模式也会出现......有什么建议吗？
这些是外部库的 cdn（网络托管）链接。在您的示例中，您很可能在错误的位置引用了引导程序等。检查 bootstrap.js 在您电脑上的存储位置，并将其与您告诉网站找到它的位置进行比较

【解决方案2】：

首先调用jquery，你必须通过任何点击事件触发你的模态显示。

$('#details-1').modal('show')

【讨论】：

感谢@zakaria，我已经添加了该行但仍然没有！我现在正在考虑使用另一种显示弹出窗口的方法