Question

我正在努力使我的模态工作，但似乎出了点问题。我试图从官方bootstrap3文档中复制代码，它仍然无法正常工作。我将添加以下代码：

Body: 

     <div class="container">

      <ul class="nav nav-pills nav-stacked">
        <li><a href="#lightbox" data-toggle="modal">Open Lightbox</a></li>
        <li><a href="#lightbox" data-toggle="modal" data-slide-to="1">2nd Image</a></li>
        <li><a href="#lightbox" data-toggle="modal" data-slide-to="2">3rd Image</a></li>
        <li><a href="#lightbox" data-toggle="modal" data-slide-to="15">Open non existing Image</a></li>
      </ul>

      <div class="modal fade and carousel slide" id="lightbox">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <ol class="carousel-indicators">
                <li data-target="#lightbox" data-slide-to="0" class="active"></li>
                <li data-target="#lightbox" data-slide-to="1"></li>
                <li data-target="#lightbox" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="item active">
                  <img src="http://placehold.it/900x500/777/" alt="First slide">
                </div>
                <div class="item">
                  <img src="http://placehold.it/900x500/666/" alt="Second slide">
                </div>
                <div class="item">
                  <img src="http://placehold.it/900x500/555/" alt="Third slide">
                  <div class="carousel-caption"><p>even with captions...</p></div>
                </div>
              </div><!-- /.carousel-inner -->
              <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
            </div><!-- /.modal-body -->
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

    </div><!-- /.container -->

Answer 1

一切似乎都运行良好。这是jsFiddle，所以我认为jQuery或bootstraps js文件的路径可能是错误的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">

  <ul class="nav nav-pills nav-stacked">
    <li><a href="#lightbox" data-toggle="modal">Open Lightbox</a></li>
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="1">2nd Image</a></li>
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="2">3rd Image</a></li>
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="15">Open non existing Image</a></li>
  </ul>

  <div class="modal fade and carousel slide" id="lightbox">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <ol class="carousel-indicators">
            <li data-target="#lightbox" data-slide-to="0" class="active"></li>
            <li data-target="#lightbox" data-slide-to="1"></li>
            <li data-target="#lightbox" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img src="http://placehold.it/900x500/777/" alt="First slide">
            </div>
            <div class="item">
              <img src="http://placehold.it/900x500/666/" alt="Second slide">
            </div>
            <div class="item">
              <img src="http://placehold.it/900x500/555/" alt="Third slide">
              <div class="carousel-caption">
                <p>even with captions...</p>
              </div>
            </div>
          </div>
          <!-- /.carousel-inner -->
          <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
        <!-- /.modal-body -->
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->

</div>
<!-- /.container -->

Bootstrap模态问题。莫达尔不起作用

1 个答案: