Twitter bootstrap Google Earth插件和Twitter引导模式
我在一个推特引导的网络项目上使用谷歌地球插件。当我在插件上使用modals时,modals会在windows中保留在插件的后面,但在mac中不会。我搜索了这个问题,了解到它是关于谷歌地球插件不让任何事情超过它。存在一个iframe解决方案,但它不适用于modals,可能我无法将其集成到我的网页。我解决了自己的问题。Frameshim方法解决了这个问题。我发现如何用引导模态来推动它。您必须在modal的content div上放置iframeshim,如下所示:Twitter bootstrap Google Earth插件和Twitter引导模式,twitter-bootstrap,twitter-bootstrap-3,google-earth-plugin,Twitter Bootstrap,Twitter Bootstrap 3,Google Earth Plugin,我在一个推特引导的网络项目上使用谷歌地球插件。当我在插件上使用modals时,modals会在windows中保留在插件的后面,但在mac中不会。我搜索了这个问题,了解到它是关于谷歌地球插件不让任何事情超过它。存在一个iframe解决方案,但它不适用于modals,可能我无法将其集成到我的网页。我解决了自己的问题。Frameshim方法解决了这个问题。我发现如何用引导模态来推动它。您必须在modal的content div上放置iframeshim,如下所示: <div class="mo
<div class="modal fade" id="x" tabindex="-1" role="dialog" aria-labelledby="XXXX" aria-hidden="true">
<div class="modal-dialog">
<!-- iFrame Shim -->
<div class ="iframe-container">
<div class ="content-container"">
<!-- content goes here! -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">xxx</h4>
</div>
<div class="modal-body">
<h3>XXXXXXXX</h3>
<div class="list-group">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">XXX</button>
</div>
</div>
</div>
<iframe class="iframeshim" frameborder="0" scrolling="no">
<html><head></head><body></body></html>
</iframe>
</div> <!-- end iframe-container -->
</div>
</div>
我希望这会有所帮助。可能的重复通常方法是相同的,但我无法使用twitter引导模式。如我的回答所示,现在一切都好了。。
.iframe-container {z-index: 100;}
.content-container {
margin:0px;
padding:0px;
overflow-x: hidden;
overflow-y: hidden;
}
.iframeshim {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -10000;
background: black;
}