CODEWITHSUNDEEP
javascriptmodal-dialogbootstrap-modalmapbox
Neong
Neong

Reputation: 53

Bootstrap Modal Not Working with Mapbox (Only Background Turns Grey)

I'm using Mapbox to render a map with markers on. When a marker is clicked, a popup will appear with buttons inside. I intend to make one of the button inside the tooltip popup window trigger a modal window.

However, right now when the button for modal is clicked, the screen turned grey/dark but no modal dialogue box shows up.

I am aware of the Boostrap modal not showing up and background turning grey in these threads: Bootstrap modal appearing under background, Twitter-bootstrap Modal not showing on page-load (grey screen). I've read the answers in those posts such as lifting the modal box divs outside the parent with fixed positions, setting z-index: -1, using consistent versions of bootstrap, etc., but nothing has worked so far.

I'm using a modal example from bootstrap to see if it works at all. I have 2 buttons that I'm testing: one is called 'Sign' using the modal data attribute, another called 'MODAL!' using the jQuery and .modal('show') method.

I appreciate your help and input on this issue! I'm quite new to Mapbox and Bootstrap so if there's something I'm missing, please kindly point out!

HTML

<html>
<head>
  <meta charset=utf-8 />
  <title></title>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
  <link href='//mapbox.com/base/latest/base.css' rel='stylesheet' />
  <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
  <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>

  <style>
    body { margin:0; padding:0; }
    .map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Sign this petition!</h4>
      </div>
      <div class="modal-body">
        <p>Fields for the signatures here, take some from the facebook API</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Sign now!</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<body>
<div id='map-tooltips-js' class='map'> </div>

JS

 $('#map-tooltips-js').on('click', '#trigger', function() {
        $('#myModal').modal('show');
      });

    myLayer.on('layeradd', function(e) {
      var marker = e.layer,
        feature = marker.feature;
      marker.setIcon(L.icon(feature.properties.icon));

      var content = '<h2>'+ feature.properties.title+'<\/h2>' + 
                  '<img src="'+feature.properties.image +'" alt="">' + 
                  '<br><br><p>' + feature.properties.description + '</p>' +
                  '<p>' + feature.properties.categories + '</p>' + 
                  "<a data-toggle='modal' href='#myModal' class='btn btn-lg btn-danger'>Sign!</a>" +
                   "<br><button type='button' class='button fill-orange' id='trigger' data-toggle='modal' data-target='.bs-example-modal-lg'>MODAL!</button>";
      marker.bindPopup(content);
    });
    myLayer.setGeoJSON(geojson);
    mapTooltipsJS.scrollWheelZoom.disable();

$('#map-tooltips-js').on('click', '#trigger', function() {
    $('#myModal').modal('show');
  });

Upvotes: 0

Views: 1417

Answers (1)

Neong
Neong

Reputation: 53

Mapbox's base.css and Bootstrap css have competing rules re how to treat modal. After commenting out link to Mapbox's base.css, the Bootstrap modal window does appear.

Upvotes: 0

Related Questions