昨日書いた
ボタンクリックすると背景が暗くなりメッセージ（ダイアログ）表示するJQuery
http://blog.goo.ne.jp/xmldtp/e/cd7ec74b438d850a6374a230358c6bb9
なんだけど、ブラウザによってはうまく行かないというのを、最後に書いた。
Chromeでは、うまくいかない。
ちなみに、これ以外でも、fadeTo(),hide()を使う方法がある。
たとえばこんなかんじ。
これをChromeで実行すると、うまく行くけど、IEでやるとうまくいかない。
理由はz-indexの解釈にあるようだ。
IEとFirefoxでz-indexの扱いが異なる
http://shirabemono.cocolog-nifty.com/blog/2008/02/iefirefoxzindex_f4bc.html
う～ん、一長一短
ボタンクリックすると背景が暗くなりメッセージ（ダイアログ）表示するJQuery
http://blog.goo.ne.jp/xmldtp/e/cd7ec74b438d850a6374a230358c6bb9
なんだけど、ブラウザによってはうまく行かないというのを、最後に書いた。
Chromeでは、うまくいかない。
ちなみに、これ以外でも、fadeTo(),hide()を使う方法がある。
たとえばこんなかんじ。
<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
type="text/javascript"></script>
<script>
$(function(){
$("#mybutton").click(function(){
$("#mask").fadeTo("slow",0.5);
$("#msg").fadeTo("slow",1);
});
$("#mybutton2").click(function(){
$("#mask").hide();
$("#msg").hide();
});
});
</script>
<body>
<font color="red">
<h1>ボタン１をクリックすると半調になり、ダイアログ表示</h1>
<BUTTON id="mybutton">ボタン１</BUTTON>
</font>
<div id=mask style="background:black;top:0px; left:0px;z-index:1;width:100%;height:100%; position:absolute;display:none">
</div>
<div id=msg style="background:white;border:1px solid gray; top:200px; left:200px; width:200px; height:200px; position:fixed; z-index:2;display:none">
<font color="blue">
<h2 class="win2">ボタン２をクリックすると、もとにもどる</h2>
</font>
<BUTTON id="mybutton2">ボタン２</BUTTON>
</div>
</body>
</html>
|
これをChromeで実行すると、うまく行くけど、IEでやるとうまくいかない。
理由はz-indexの解釈にあるようだ。
IEとFirefoxでz-indexの扱いが異なる
http://shirabemono.cocolog-nifty.com/blog/2008/02/iefirefoxzindex_f4bc.html
う～ん、一長一短
アクセス
トータル
ランキング
