Bootstrap模式不能與Mapbox一起使用（僅背景變灰）

我正在使用Mapbox渲染帶有標記的地圖。點擊標記時，會出現一個彈出窗口，其中有按鈕。我打算讓工具提示彈出式窗口中的一個按鈕觸發一個模式窗口。Bootstrap模式不能與Mapbox一起使用（僅背景變灰）

但是，現在當點擊模式按鈕時，屏幕變成灰色/黑色，但沒有模式對話框出現。

我知道Boostrap模式沒有顯示出來，並且在這些線程中灰色背景：Bootstrap modal appearing under background,Twitter-bootstrap Modal not showing on page-load (grey screen)。我已經閱讀了這些帖子中的答案，例如用固定位置提取父級以外的模塊盒子div，設置z-index：-1，使用bootstrap的一致版本等，但目前爲止沒有任何工作。

我使用引導程序中的模態示例來查看它是否可用。我有兩個按鈕，我正在測試：其中一個使用模態數據屬性稱爲「Sign」，另一個稱爲「MODAL！」。使用jQuery和.modal（'show'）方法。

我很感謝您對此問題的幫助和意見！我對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>

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

來源

2016-02-25 Neong

解決。 Mapbox的base.css與Bootstrap css有競爭規則。 – Neong

Mapbox的base.css和Bootstrap CSS已經競爭規則重新如何治療模式。在註釋到Mapbox的base.css鏈接後，Bootstrap模式窗口確實出現。

來源

2016-02-25 23:36:04 Neong

Bootstrap模式不能與Mapbox一起使用（僅背景變灰）

回答

相關問題