Question

我是新手，我似乎无法让我的模态工作。我的data-target =＆＃34;＃details-1＆＃34;。可能是什么问题。我试图找到它几天无济于事。提前谢谢。代码

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

Answer 1

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

LevelOne
{
    Level
    {
        Id = "ABC",
        Desc = "Some desc"
    },
    Level
    {
        Id = "DEF",
        Desc = "Some desc"
    },
    Level
    {
        Id = "PQR",
        Desc = "Some desc"
    },
    Level
    {
        Id = "XYZ",
        Desc = "Some desc"
    }
}

LevelTwo
{
    Level
    {
        Id = "123A",
        Parent = "ABC",
        Desc = "Some Desc"
    },
    Level
    {
        Id = "123B",
        Parent = "ABC",
        Desc = "Some Desc"
    },
    Level
    {
        Id = "123C",
        Parent = "PQR",
        Desc = "Some Desc"
    },
    Level
    {
        Id = "123D",
        Parent = "XYZ",
        Desc = "Some Desc"
    }
}

LevelThree
{
    Level
    {
        Id = "XYZ1",
        Parent = "123A",
        Desc = "Some Desc"
    },
    Level
    {
        Id = "XYZ2",
        Parent = "123A",
        Desc = "Some Desc"
    },
    Level
    {
        Id = "XYZ3",
        Parent = "123B",
        Desc = "Some Desc"
    },
    Level
    {
        Id = "XYZ4",
        Parent = "123D",
        Desc = "Some Desc"
    }
}

Answer 2

您缺少以下属性data-toggle="modal" data-target="#details-1"。这些是特定于bootstrap的，并告诉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>

bootstrap模态弹出窗口根本不显示

2 个答案: