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] + " οnclick="+c+"</button>&nbsp;<button id=" + playback_id[i] + " οnclick='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模态框还可以添加其他各种效果。

 

转载于:https://www.cnblogs.com/feleventh/p/4773035.html