Question

我使用Mapbox渲染带有标记的地图。单击标记时，将出现一个弹出窗口，其中包含按钮。我打算在工具提示弹出窗口中的一个按钮触发一个模态窗口。

但是，现在单击模态按钮时，屏幕变为灰色/黑色，但没有显示模态对话框。

我知道Boostrap模式在这些线程中没有显示并且背景变为灰色：Bootstrap modal appearing under background，Twitter-bootstrap Modal not showing on page-load (grey screen)。我已经阅读了这些帖子中的答案，比如用固定位置解除父级外的模态框div，设置z-index：-1，使用一致版本的bootstrap等，但到目前为止没有任何工作。< / p>

我使用bootstrap中的模态示例来查看它是否正常工作。我有2个按钮，我正在测试：一个叫做＆＃39; Sign＆＃39;使用模态数据属性，另一个称为“模式”！＆＃39;使用jQuery和.modal（＆＃39; show＆＃39;）方法。

感谢您对此问题的帮助和意见！我对Mapbox和Bootstrap很陌生，所以如果我有什么遗漏，请指出！

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');
  });

Answer 1

Mapbox的base.css和Bootstrap css有竞争规则如何处理模态。在注释掉Mapbox的base.css链接后，会出现Bootstrap模式窗口。

Bootstrap模式不适用于Mapbox（仅背景变为灰色）

1 个答案: