Question

我正在使用Twitter bootstrap在web项目上使用google earth插件。当我在插件上使用模态时，模态会在Windows中保留插件，但不会在mac中。我搜索了这个问题，并了解到这是关于谷歌地球插件不会让任何事情超过它。存在一个iframe解决方案here，但它不适用于模态，也许我无法将其集成到我的网页。

Answer 1

我解决了自己的问题。 Frameshim方法解决了这个问题。我发现如何使用bootstrap模态来阻止它。您必须在模态的内容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;
    }

我希望这有帮助..

使用Twitter Bootstrap模式的Google地球插件

1 个答案: