CODEWITHSUNDEEP
jquerytwitter-bootstrap
dave_does_not_understand
dave_does_not_understand

Reputation: 115

Bootstrap modal fade div not active

first of all I barely know what I am doing so I most likely have a simple syntax error. I am trying to use this site bootleaf as a template for some maps I am making. I would like the about button to work for me as it does at the bootleaf site but mine doesnt appear to become active. if you click on my button here you will see what I am talking about. here is all of my code for the modal including the 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 -->

and here is the jquery:

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

});

Upvotes: 0

Views: 1110

Answers (2)

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

I used bootply and all I did was change the data-target class:

Bootply

make sure the class you are targeting is the same class your bootstrap modal has. 

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

Upvotes: 1

thedevlpr
thedevlpr

Reputation: 1101

Fixed some of your HTML: Your li is not a valid markup since it's not enclosed within a ul and then you were missing an opening bracket when declaring your modal.

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

Then just added the bootstrap script and css CDN to the project and it works fine

JSFIDDLE

Be sure to include these in your <head> section if you don't have them already.

If you downloaded the files and they are located in your project directory I would suggest you replace the references to those files and use a CDN it makes loading faster and you are less likely to run into issues with missing scripts or styles.

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

Upvotes: 0

Related Questions