必要な知識

JavaScript で ウィンド(オーバーレイ)を表示させる簡単方法

JavaScript で ウィンド(オーバーレイ)を簡単な表示方法ですが、最初検索するときオーバーレイって単語が出てこなくて「ウィンド」とかで検索したと～い思い出がありますｗｗｗ
そうなんす、ボタンをクリックするとひょいっと出てくる、まぁウィンドウですね。よく使われるのが画像をクリックすると大きな画像が表示されるやつとか。

普通に検索すると、わ！めんどくさそうってことになるんですけど、説明が面倒なのであってやってることはたいしたことない。

JavaScript で ウィンド(オーバーレイ)を表示させる簡単方法の原理

style の display はわかりますよね？
もしくは opacity (透明度)。
さらに .fadeIN() とか .fadeOut()とか。
あれで表示させたり消したりしてるんですわ。

※.FadeIn , .fadeOut は、というか javascriptの場合、というか、言語全部ですけど、なぜか 大文字小文字を気を付けてなかったりして動かない！ってことになってることが多々ありますので気を付けて。

で表示させる窓（オーバーレイ）を書くCSSが css をちゃんとわかってないとちょいと面倒かも。
そのCSSで窓（オーバーレイ）のサイズや、画面の中央に、かつ他の要素よりも前面に出すってことをやってるのでね。


JavaScript で ウィンド(オーバーレイ)のためのCSS

ポイントは、z-index。
z-index というのは、要素の層を指定すると考えるといいかも。
一番深い階層は、0。前面は 999 とか。

HTMLは、こんな感じ
0001 <div id="outFrame">
0002  <div id="inFrame">
0003   //オーバーレイの中に表示させるもの
0004   <div id="overlay_title"><b>I am a overlay.</b></div>
0005   <div><input type="button" id="closeButton" value="Close" OnClick="overlay_close();"></div>
0006  </div>
0007 </div>

CSSはこんな感じ
0001 #outFrame{
0002  width: 30%;
0003  height: 30%;
0004  margin: 100px auto;
0005  border: 2px solid #000;
0006  background-color: #fff;
0007  text-align: center;
0008  display: none;
0009  z-index: 999;
0010 }

このCSSでは、オーバーレイ（ウィンドウ）のサイズは、画面全体の中の 横 30% 縦 30% ということになってる。
マージンは上下に 100px 左右は、中央寄せ。
最初の表示は display:none; つまり、非表示。
で最前面に表示( z-index:999; )

JavaScript で ウィンド(オーバーレイ)を簡単に表示させてみる。

ボタンを押されたら、表示用ボタンを消してオーバーレイのフレームの表示を有効にしてあげればいい。
0001 <input type="button" value="オーバーレイを開く" id="openButton" OnClick="overlat_open();">
0002 <script>
0003 //順番注意 この処理では フレーム（オーバーレイ、ウィンドウ）の中の要素にたいしてなにかしてるわけではないので関係ないのだけど、
0004 //これをベースに考えた時には。
0005 //opacity なら要素は存在したままだからいいけど、display や fade で出したり消したりするのなら 
0006 //フレーム（オーバーレイ、ウィンドウ）が表示されていない状態だとその中身も存在していないことになる。
0007 //だから、フレーム（オーバーレイ、ウィンドウ）の中身の処理は、フレーム（オーバーレイ、ウィンドウ）が表示されている状態で行うようにする。
0008 function overlay_open()
0009 {
0010  $('#OutFrame').fadeIn();
0011  $('#openButton').fadeOut();
0012 }
0013 function overlay_close()
0014 {
0015  $('#openButton').fadeIn();
0016  $('#OutFrame').fadeOut();
0017 }
0018 </script>


JavaScript で ウィンド(オーバーレイ)を表示させる簡単方法 まとめと注意

まとめると、CSSで最前面に表示させるオーバーレイ（ウィンド）を設定しておいて、それの display を on にしてあげることでオーバーレイは簡単に表示できる。
けど、この方法で可能なのは、その中にFORMを設置しておいたり、何かを表示させる場合にのみ有効な方法。
つまり、静的なオーバーレイなのだ。

じゃあ、動的にというと、例えば、javascript から php を呼び出して、時間のかかる処理を時分割(?)して処理セルだとか、プログレスバーを表示せるとかの場合これではプログレスバーとかいくら値を書き換えても「再表示」されない。
処理が終わってから最後の表示内容が表示されるだけ。

動的に表示させる場合は、インターバル処理というのか、一定時間が来たら起動させる感じにする。
よく検索されているのが、VBAでいうところの do event を javascript ではどう書く？って話なんだけど、残念なことに javascript は do eventなんて便利な関数はないのだ。

インターバルタイマーで呼び出された関数だけが「再描画」「再表示」を実現させる唯一の方法なのだ。
これ、検索してるとき 非同期とか同期とかの問題をいっしょくたに説明されていることが多くてわけわかめになることが多い。

※通常の言語は、上から順番に処理される（同期処理。前が終わってから次を行う）けど
javascriptは非同期処理（順不同、できる命令からやる）ってことから、
この割り込み(DoEvent）の話になると同期非同期の説明は不可避らしいのだ。そんなことないと思うけどｗｗｗ
理由はどうあれ、似たようなことをしたければ「どうすればいい？」って話だと思うんだ。

JavaScript で ウィンド(オーバーレイ)を表示させる簡単方法。ついでに DoEventはどう書くの？


とりあえず DoEventsは javascriptにはない。
やるならば、構造から変えないといけない。
例えば、前述のオーバーレイの中の overlay_title の内容を書き換える場合こう書く。
0001 <div id="outFrame">
0002  <div id="inFrame">
0003   //オーバーレイの中に表示させるもの
0004   <div id="overlay_title"><b>I am a overlay.</b></div>
0005   <div id="closeButton" >
0006    // ↓ javascriptの場合ループしてる最中はボタンが押せないので a タグに変える。
0007    //    (cssを駆使してボタンっぽく見せるとよいね)
0008    <a href="#" OnClick="overlay_close();">Close"</a>
0009   </div>
0010  </div>
0011 </div>
0012 
0013 <input type="button" value="オーバーレイを開く" id="openButton" OnClick="overlat_open();">
0014 
0015 <script>
0016 var intervalID;
0017 var count;
0018 function overlay_open()
0019 {
0020  $('#openButton').fadeOut();
0021  $('#OutFrame').fadeIn();
0022  intervalID = setInterval("overlay_update()", 50); //インターバルタイマーを起動
0023 }
0024 function overlay_close()
0025 {
0026  clearInterval(intervalID);       //インターバルタイマーを止める
0027  $('#openButton').fadeIn();
0028  $('#OutFrame').fadeOut();
0029 }
0030 function overlay_update()
0031 {
0032  count++;
0033  var elem = document.getElementById('overlay_title');
0034  elem.innerHTML = count+' 回目 I am a overlay.';
0035 
0036 }
0037 </script>

更に詳しいことは別の投稿で。
この書き込みがあなたの一助になれば幸いです。





スポンサードリンク

関連記事一覧