2

私はJavascriptの初心者です。モーダル ダイアログを学習しようとしましたが、いくつかの問題が発生しました。コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

<head>
<title>Click here to show the overlay</title>
<style>
#overlay {
     visibility: hidden;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     text-align:center;
     z-index: 200;
     background-image:url(maskBG.png);
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
</style>

<script>
function overlay(){

el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

}
</script>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<p align="center"><a href='#' onclick='overlay()'>Click here to show the overlay</a></p>

<p align="center">this is my text... this is my text... this is my text...&nbsp;this 
is my text... this is my text...&nbsp;this is my text...this is my text... this 
is my text... this is my text... this is my text...</p>


<p align="center"><b>this is my text... this is my text... this is my text...&nbsp;this 
is my text... t</b></p>

<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>

</body>

</html>

これは非常に単純なコードです。私の質問は、レイヤー 2 のポップアップ後にレイヤー 1 をクリックできないのはなぜですか? レイヤー2がレイヤー1の上にとどまり、レイヤー1をブロックしたためだと思います。しかし、なぜ「リンク」をクリックして関数 overlay() をトリガーできるのでしょうか? レイヤー 2 の可視性は隠されていますが、それでもレイヤー 1 の上にありますか? 関数は z-index さえ変更しませんでした。私はそれを理解することはできません、なぜですか。

もう 1 つの質問は、レイヤー 2 を破棄してレイヤー 1 に戻るにはどうすればよいかということです。いくつかの単純なコードが高く評価されています。

助けてくれてありがとう！

4

1 に答える 1

5

Reason why you can't click underneath the overlay is because there's an underlay layer. Its background is transparent, but there all the same.

See http://jsfiddle.net/CSLD2/1/ for a better illustration.

To close the layer, simply insert a close button of some kind and have its onclick event set the layer to invisible. You may also consider using a mature overlay library of some kind, as it's been tested against unpredictable HTML conditions.

于 2012-09-13T17:01:17.957 に答える