Bootstrap model模態框與百度地圖API發生衝突時的解決辦法

　　在使用百度地圖API的過程當中，當我須要在infoWindow的按鈕點擊觸發modal模態框時，就會發現bootstrap的模態框會失效。弄清modal的原理就能夠經過自定義modal的css樣式和modal方法來解決這個問題。Bootstrap modal模態框的原理是經過控制modal框div的visibility屬性來變化來實現的，在初始狀態modal div的visibility屬性值爲hidden，在頁面上隱藏，當點擊按鈕觸發（或別的事件）一個方法使div的visibility值變爲visible從而達到顯示的目的。

（1）我將infoWindow的content設置以及modal設置以下：當點擊軌跡回放按鈕時，會彈出一個模態框來顯示datetimepicker控件。

 

<!-- 模態框（Modal） -->
<div id="modal-overlay">
    <div class="modal-data">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="myModalLabel">
                    確認時間段
                </h3>
            </div>
            <div class="modal-body">
                <form action="playback.html" class="form-horizontal"  role="form" id="form1">
                    <div class="form-group row">
                        <label for="start_time" class="col-md-4 col-sd-4">開始時間</label>
                        <div class="input-group date form_datetime col-md-8 col-sm-8"  data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
                            <input class="form-control" id="start_time" name="start_time" size="16" type="text" value="" readonly >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="end_time" class="col-md-4 col-sd-4">結束時間</label>
                        <div class="input-group date form_datetime col-md-8 col-sm-8" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input2">
                            <input class="form-control" id="end_time" name="end_time" size="12" type="text" value="" readonly >
                        </div>
                    </div>
                    <div class="form-group text-center">
                        <button type="submit" class="btn btn-primary">
                            查詢
                        </button>
                        <button type="button" class="btn btn-default"
                                onclick="closeModal()">關閉
                        </button>

                    </div>
                </form>
            </div>

        </div><!-- /.modal-content -->

</div><!-- /.modal -->

 

　　點擊事件的js代碼以下：

 1 var content = "<div class='infoWindow' ><p><b>" + number + "</b></p>" + "<p>" + datetime + "</p>" + "<p>" + stateHead + statehtml + "</p>" + "<p>里程：" + mileage + "km</p>"  + "<p><button id=" + track_id[i] + " onclick="+c+"</button>&nbsp;<button id=" + playback_id[i] + " onclick='modal(this.id)'>軌跡回放</button></p></div>";
 2 function modal(id) {
 3     var e1 = document.getElementById('modal-overlay');
 4     e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
 5     var car_index = parseInt(id.substr(1));
 6 
 7     obj_id = carData[car_index].obj_id;
 8     obj_name=carData[car_index].obj_name;
 9     sessionStorage.obj_name=obj_name;
10     sessionStorage.obj_id=obj_id;
11 }

但此時還並無bootstrap中的那種模態框的絢麗動畫效果。

(2)而後將modal框以及modal內容的div的css樣式以下：

將modal框的visibility設置爲hidden。

 

#modal-overlay {
    visibility: hidden;
    position: absolute;   /* 使用絕對定位或固定定位  */
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
    background-color: #333;
    opacity: 0.95;   /* 背景半透明 */
}
/* 模態框樣式 */
.modal-data{
    width:90%;
    margin: 20px auto;
    background-color: #fff;
    border:1px solid #000;
    padding:2px;
    text-align:center;
}

 

　　

　　(2)這時雖然以及實現了modal的效果但咱們發現，其實尚未bootstrap中modal框的那種從屏幕上方掉下來的動畫效果，這時能夠添加css3過渡樣式來實現一樣的效果，在#modal-overlay的樣式中添加，

-webkit-transition:top 2s; /* Safari and Chrome */

在modal()中添加e1.style.top=20px;

一樣的，自定義的modal模態框還能夠添加其餘各類效果。