1

あなたが提供できるアドバイスを事前にありがとう！私の Web サイトのデスクトップ バージョンで適切に機能するオーバーレイがあります。ただし、モバイルで使用するためにオーバーレイを設計すると、問題が発生します。jfiddle は次のとおりです。

http://jsfiddle.net/kevindp78/bs3FT/1/

コードは以下です。モバイル ビューでこれを試してみると、コンテンツが間違ったレベルで表示されているようです (#fixedoverlay の下で、#overlaymatte の上にある可能性がありますか?) 基本的に、何らかの理由で #overlaycontent 内のコンテンツを操作できません。その上に暗い背景のレイヤーがあり、div の上部には白い帯しかありません。何か案は？ありがとう！

私のCSS：

#fixedoverlay, #overlaymatte {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 999;
}

#overlaycontent {
position: relative;
width: 960px;
margin: 25px auto;
max-height: 75%;
overflow: auto;
background: #fff;
padding: 20px;
/*  border: 20px solid #fff; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 9999;
}


#overlaymatte {
background: none;
}

私のHTML

<div id="fixedoverlay">
 <div id="overlaymatte"></div>
<div id="overlaycontent">
    <div><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my     content</p><p>Here's my content</p></div>
</div>
</div>
4

1 に答える 1

0

申し訳ありませんが、これは私が使用しているモバイル デザイン ソフトウェア (Mobify) に関連する HTML と JavaScript の問題の結果です。

function popUpOverlay(){
        $('body').append('<div id="fixedoverlay"><div id="overlaymatte"></div><a title="close" href="#" class="closeoverlay">Close</a><div id="overlaycontent"></div></div>');
        $('#overlaycontent').append(loaderimg);
        $('#loaderimg').show();
        $(window).keydown(function(e){
            if(e.keyCode == 27) {
                $('#fixedoverlay').remove();
            }
        })
    }

私の問題は、Web サイト全体で 2 回 Javascript を適用していたことでした。JavaScript が 2 回適用されたため、実際にはオーバーレイの 2 つのインスタンスが表示されていました。インスタンスが 1 つだけ発生するように JavaScript を修正したところ、問題は発生しなくなりました。

于 2013-03-04T13:55:19.423 に答える