标签：
在使用百度地图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> <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模态框还可以添加其他各种效果。
Bootstrap model模态框与百度地图API发生冲突时的解决办法
标签：
原文地址：http://www.cnblogs.com/feleventh/p/4773035.html
