Reveal Modal not working on IE (no animation in the code)

414 Views Asked by At

I'm working on a website which uses reveal modal to open divs. I'm using the non-jquery version and I get the modals to open on both Firefox and Google Chrome, however, they don't seem to appear on IE. I read on the forum that there is an issue with IE and modal animation but I haven't included them in my code. Can anyone help me figure out the problem? I am using the latest versions of all browsers.

Code

    <ul>
        <li><a href="#" data-reveal-id="myModal1">REGISTER</a></li>  
        <li><a href="#" data-reveal-id="myModal2">ABOUT US</a></li>
        <li><a href="#" data-reveal-id="myModal3">IMPROVE</a></li>            
        <li><a href="#" data-reveal-id="myModal4">CONTACT</a></li>     
    </ul> 

    <div id="myModal1" class="reveal-modal"> 
        <p style="margin-right:10px; margin-left:10px">
        Text
        </p>
    <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="myModal2" class="reveal-modal"> 
        <p style="margin-right:10px; margin-left:10px">
        Text
        </p>
    <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="myModal3" class="reveal-modal"> 
        <p style="margin-right:10px; margin-left:10px">
        Text
        </p>
    <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="myModal4" class="reveal-modal"> 
        <p style="margin-right:10px; margin-left:10px">
        Text
        </p>      
    <a class="close-reveal-modal">&#215;</a>
    </div>             

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.reveal.js"></script>

CSS

    .reveal-modal-bg { 
        position: fixed; 
        height: 100%;
        width: 100%;
        background: #000;
        background: rgba(0,0,0,.8);
        z-index: 100;
        display: none;
        top: 0;
        left: 0; 
    }

    .reveal-modal {
        visibility: hidden;
        top: 100px; 
        left: 50%;
        margin-left: -300px;
        width: 400px;
        background: #F2EDE0 url(modal-gloss.png) no-repeat -200px -80px;
        color: #000;
        position: absolute;
        z-index: 101;
        padding: 30px 40px 34px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
        -box-shadow: 0 0 10px rgba(0,0,0,.4);
    }

    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium        { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge        { width: 800px; margin-left: -440px;}

    .reveal-modal .close-reveal-modal {
        font-size: 22px;
        line-height: .5;
        position: absolute;
        top: 8px;
        right: 11px;
        color: #aaa;
        text-shadow: 0 -1px 1px rbga(0,0,0,.6);
        font-weight: bold;
        cursor: pointer;
    } 
1

There are 1 best solutions below

0
On

Ok, I figured out what the problem was. It seems that the reveal modal was conflicting with the gooogle maps geolocator. Just realized that I forgot to set googleapis sensor to true. As soon as I changed it to on, the modals work on IE. Not sure what the link is between the two but it's good to see that it now works.