公開モーダルを使用して div を開く Web サイトに取り組んでいます。jquery 以外のバージョンを使用しており、Firefox と Google Chrome の両方でモーダルを開くことができますが、IE には表示されないようです。IE とモーダル アニメーションに問題があることをフォーラムで読みましたが、それらをコードに含めていません。誰でも私が問題を理解するのを手伝ってくれますか? すべてのブラウザの最新バージョンを使用しています。
コード
<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;
}