0

我正在开发一个使用显示模式打开 div 的网站。我使用的是非 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">&#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;
    }
4

1 回答 1

0

好的，我弄清楚了问题所在。显示模式似乎与谷歌地图地理定位器冲突。刚刚意识到我忘记将 googleapis 传感器设置为 true。一旦我将其更改为 on，模式就可以在 IE 上运行。不确定两者之间的联系是什么，但很高兴看到它现在可以工作。

于 2014-06-07T20:37:21.337 回答