ボタンクリックすると背景が暗くなりメッセージ（ダイアログ）表示するJQuery - ウィリアムのいたずらの、まちあるき、たべあるきーPART2

ボタンをクリックすると、半調になって、
背景が暗くなり、ダイアログがでて、メッセージを表示する、

つまり、

の「ボタン１」をクリックすると

なかんじで、ダイアログが出て、そのダイアログのボタンをクリックすると

もとにもどる

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

が詳しい。