带有 Twitter Bootstrap 模式的 Google 地球插件答案

【问题标题】：Google Earth Plugin With Twitter Bootstrap Modal带有 Twitter Bootstrap 模式的 Google 地球插件
【发布时间】：2014-07-02 10:17:15
【问题描述】：

我在一个带有 twitter bootstrap 的网络项目中使用谷歌地球插件。当我在插件上使用模态时，模态在 windows 中停留在插件后面，但在 mac 中没有。我搜索了这个问题并了解到它是关于谷歌地球插件的，不会让任何东西超过它。存在一个 iframe 解决方案 here，但它不适用于模态框，也许我无法将它集成到我的网页中。

【问题讨论】：

How can I place a html div over the Google Earth plugin? Involves wmode, I imagine的可能重复
通常方法是一样的，但我不能用 twitter 引导模式来做到这一点。现在可以了，如我的回答所示..

标签： twitter-bootstrap twitter-bootstrap-3 google-earth-plugin

【解决方案1】：

我解决了我自己的问题。 Frameshim 方法解决了这个问题。我发现了如何使用引导模式来实现它。您必须在模态的内容 div 上放置一个 iframeshim，如下所示：

<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">&times;</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>

而css类就是这些

.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;
    }

我希望这会有所帮助..

【讨论】：