Javascript 引导模式不使用Mapbox（仅背景变为灰色）_Javascript_Modal Dialog_Bootstrap Modal_Mapbox

Javascript 引导模式不使用Mapbox（仅背景变为灰色）

javascript mapbox

Javascript 引导模式不使用Mapbox（仅背景变为灰色）,javascript,modal-dialog,bootstrap-modal,mapbox,Javascript,Modal Dialog,Bootstrap Modal,Mapbox,我正在使用Mapbox渲染带有标记的地图。单击标记时，将出现一个弹出窗口，其中包含按钮。我打算让工具提示弹出窗口中的一个按钮触发一个模式窗口但是，现在单击模式按钮时，屏幕变灰/变暗，但不显示模式对话框我知道Boostrap模式没有出现，背景在这些线程中变为灰色：。我已经阅读了这些帖子中的答案，比如用固定的位置将模态盒div提升到父级之外，设置z-index:-1，使用一致版本的bootstrap，等等，但是到目前为止没有任何效果我正在使用bootstrap中的一个模态示例来查看它是否有效。

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

但是，现在单击模式按钮时，屏幕变灰/变暗，但不显示模式对话框

我知道Boostrap模式没有出现，背景在这些线程中变为灰色：。我已经阅读了这些帖子中的答案，比如用固定的位置将模态盒div提升到父级之外，设置z-index:-1，使用一致版本的bootstrap，等等，但是到目前为止没有任何效果

我正在使用bootstrap中的一个模态示例来查看它是否有效。我有两个正在测试的按钮：一个使用模态数据属性称为“符号”，另一个称为“模态！”使用jQuery和.modal（'show'）方法

我感谢你在这个问题上的帮助和投入！我对Mapbox和Bootstrap还很陌生，所以如果我遗漏了什么，请指出

HTML


正文{margin:0；padding:0；}
.map{位置：绝对；顶部：0；底部：0；宽度：100%；}
&时代；
在请愿书上签名！
这里的签名字段，从facebook API中获取一些
接近
现在签字！

$（“#映射工具提示js”）。在（'click'，'#trigger'，function（）上{
$（'myModal'）.modal（'show'）；
});
myLayer.on（'layeradd'，函数（e）{
var标记=e.layer，
feature=marker.feature；
marker.setIcon（L.icon（feature.properties.icon））；
var content=''+功能.properties.title+''
'' + 
“

”+feature.properties.description+”'+
“”+feature.properties.categories+”“+
"" +
“
模态！”；
marker.bindpoop（内容）；
});
setGeoJSON（geojson）；
mapTooltipsJS.scrollWheelZoom.disable（）；
$（“#映射工具提示js”）。在（'单击'，'触发'，函数（）上{
$（'myModal'）.modal（'show'）；
});

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

。Mapbox的base.css具有与引导css相竞争的规则。

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

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