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">×</a>
</div>
<div id="myModal2" class="reveal-modal">
<p style="margin-right:10px; margin-left:10px">
Text
</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="myModal3" class="reveal-modal">
<p style="margin-right:10px; margin-left:10px">
Text
</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="myModal4" class="reveal-modal">
<p style="margin-right:10px; margin-left:10px">
Text
</p>
<a class="close-reveal-modal">×</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;
}
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.