Question

首先，我几乎不知道我在做什么，所以我很可能有一个简单的语法错误。我正在尝试使用此网站bootleaf作为我正在制作的某些地图的模板。我希望关键按钮能够像我在bootleaf网站上那样为我工作，但我似乎并没有变得活跃。如果你点击我的按钮here，你会看到我在说什么。这是我的模态的所有代码，包括jquery。

BOOTSTRAP 3.3.1 JQUERY 1.11.1

<li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="about-btn"><i class="fa fa-question-circle white"></i>&nbsp;&nbsp;About</a></li>

div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Welcome to the glory of History!</h4>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs" id="aboutTabs">
          <li><a href="#about" data-toggle="tab"><i class="fa fa-question-circle"></i>&nbsp;About the project</a></li>

         <!--  <li><a href="#contact" data-toggle="tab"><i class="fa fa-envelope"></i>&nbsp;Contact us</a></li> -->
          <li><a href="#disclaimer" data-toggle="tab"><i class="fa fa-exclamation-circle"></i>&nbsp;Disclaimer</a></li>
          <li><a href="#aboutGIS" data-toggle="tab"><i class="fa fa-question-circle"></i>&nbsp;About the GIS stuff</a></li>

        </ul>
        <div class="tab-content" id="aboutTabsContent">
          <div class="tab-pane fade in" id="aboutGIS">
            <p>This map represents the integration of several much smarter peoples tools which include <a href="http://getbootstrap.com/">Bootstrap 3</a>,  <a href="http://mapbox.com/" target="_blank">MapBox</a>,
              <a href="http://leafletjs.com/" target="_blank">Leaflet</a>,  <a href="http://osmbuildings.org/" target="_blank">OSMBuildings</a>, and the work of <a href="https://github.com/bmcbride/bootleaf" target="_blank">Brian McBride</a>. I have taken some static maps off of the Denver Public Library’s website, gave them the good old GIS treatment and brought them to you! </p>
            <div class="panel panel-primary">
              <div class="panel-heading">Data</div>
              <ul class="list-group">
                <li class="list-group-item">The Sanborn Maps come from The DPL public map collection</li>
                <li class="list-group-item">The Buildings are courtesy of OSM Buildings</li>
                <li class="list-group-item">You can get imagery anywhere but this fine example is from ESRI.</li>
                <li class="list-group-item">Modern roads from the fine folks at GeoIQ.</li>

              </ul>
            </div>
          </div>
          <div id="disclaimer" class="tab-pane fade text-danger">
            <p>This is all here in good fun.</p>
            <p> I have made every attempt to utilize best georeferencing practices but the original files were a bit of a mess to work with. Consequently some of the blocks are a little off but I think everyone gets the idea! It was a bit of a process to get the images and stitch them together which is why they are incomplete but still, History!</p>
          </div>

          <div class="tab-pane fade active in" id="about">
            <p>fill me with knowledge.</p>
            <div class="panel panel-primary">
              <div class="panel-heading">Features</div>
              <ul class="list-group">
                <li class="list-group-item"></li>
                <li class="list-group-item"></li>
                <li class="list-group-item"></li>

              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这里是jquery：

 $("#about-btn").click(function() {
  $("#aboutModal").modal("show");
  return false;

}）;

Answer 1

我使用了bootply，我所做的就是更改数据目标类：

Bootply

确保您定位的类与您的引导模式具有相同的类。

<li><a href="#" data-toggle="collapse" data-target=".thisClass" id="about-btn"><i class="fa fa-question-circle white"></i>&nbsp;&nbsp;About</a></li>

<div class="modal fade thisClass" id="aboutModal" tabindex="-1" role="dialog">
..........<!--the rest of your code-->

Answer 2

修正了您的一些HTML：您的li不是有效的标记，因为它未包含在ul中，然后您在声明模态时错过了一个左括号。

HTML

<ul>
  <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="about-btn"><i class="fa fa-question-circle white"></i>About</a>
  </li>
</ul>

<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">

然后只是将bootstrap脚本和css CDN添加到项目中并且工作正常

JSFIDDLE

如果您还没有这些内容，请务必在<head>部分中加入这些内容。

如果您下载了文件并且它们位于项目目录中，我建议您替换对这些文件的引用并使用CDN，这样可以加快加载速度，并且您不太可能遇到缺少脚本或样式的问题。 / p>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Bootstrap模态淡入div无效

2 个答案:

Bootply