ボタンをクリックすると、半調になって、
背景が暗くなり、ダイアログがでて、メッセージを表示する、
つまり、
の「ボタン１」をクリックすると
なかんじで、ダイアログが出て、そのダイアログのボタンをクリックすると
もとにもどる
JQueryについて考える。
■概要
・半調にするには、opacity(透明度）を使う
すべての項目を半調にしたいので、半調にしたい項目全てを、
クラスwin1に、
ダイアログとして表示するのをwin2にしている
・ダイアログは、ボタンがおされたたびに作っても良いが、
今回は、非表示にしておき、(display:none)
ボタンがクリックされたら、非表示をブロック表示に変えている
・ダイアログのボタンがクリックされたら、もとにもどす。
この辺の処理をJQueryで行っている。
■ソースコード
こんかなんじ
<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(){
$("body").css("background-color","black");
$("body,.win1").css("opacity","0.5");
$("#msg").css("display","block");
$("#msg").css("background-color","white");
});
$("#mybutton2").click(function(){
$("body").css("background-color","white");
$("body,.win1").css("opacity","1.0");
$("#msg").css("display","none");
});
});
</script>
<body>
<font color="red">
<h1 class="win1">ボタン１をクリックすると半調になり、ダイアログ表示</h1>
<BUTTON class="win1" id="mybutton">ボタン１</BUTTON>
</font>
<div class="win2" id=msg style="border:1px solid gray; top:200px; left:200px; width:200px; height:200px; position:absolute; display:none;">
<font color="blue">
<h2 class="win2" >ボタン２をクリックすると、もとにもどる</h2>
</font>
<BUTTON class="win2" id="mybutton2">ボタン２</BUTTON>
</div>
</body>
</html>
|
■その他
opacity表示は、ブラウザによって、いろいろあるらしい。
そんなこんなについては、
http://blog1.erp2py.com/2011/04/cssopacityie.html
が詳しい。
ウィリアムのいたずら @xmldtp
アクセス
トータル
ランキング
