Twitter bootstrap Google Earth插件和Twitter引导模式

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

我在一个推特引导的网络项目上使用谷歌地球插件。当我在插件上使用modals时,modals会在windows中保留在插件的后面,但在mac中不会。我搜索了这个问题,了解到它是关于谷歌地球插件不让任何事情超过它。存在一个iframe解决方案,但它不适用于modals,可能我无法将其集成到我的网页。

我解决了自己的问题。Frameshim方法解决了这个问题。我发现如何用引导模态来推动它。您必须在modal的content 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>

我希望这会有所帮助。

可能的重复通常方法是相同的,但我无法使用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;
    }