1

I am using google earth plugin on a web project with twitter bootstrap. When I use modals over plugin, modals stay back of the plugin in windows but not in mac. I searched this problem and learned that it is about google earth plugin does not let be anything over it. There exist an iframe solution here but it did not work with modals maybe I couldn't integrate it to my web page.

kml_ckr
  • 2,211
  • 3
  • 22
  • 35
  • possible duplicate of [How can I place a html div over the Google Earth plugin? Involves wmode, I imagine](http://stackoverflow.com/questions/506984/how-can-i-place-a-html-div-over-the-google-earth-plugin-involves-wmode-i-imagi) – Ilia Choly Jul 03 '14 at 14:52
  • Generally the method is the same but I couldn't do it with twitter bootstrap modals. Now it is ok as shown at my answer.. – kml_ckr Jul 04 '14 at 07:24

1 Answers1

2

I solved my own question. Frameshim method solves the problem. I found how to impelement it with bootstrap modals. You must put an iframeshim on modal's content div as below:

<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>

And css classes are these

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

I hope this helps..

kml_ckr
  • 2,211
  • 3
  • 22
  • 35