0

公開モーダルを使用して 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">&#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