【HTML/JavaScript/CSS】 Firefox 風 擬似 dialog 表示【解説】

【HTML/JavaScript/CSS】 Firefox 風 擬似 dialog 表示【解説】

【HTML/JavaScript/CSS】 Firefox 風 擬似 dialog 表示【サンプル】を、各自のホームページで使用する方法です。サイズが大きすぎて載せ切れなかったので、別記事にしました。(前記事とこの記事に分けたということ)
～ 注意事項 ～
・あくまで「Firefox風dialog」を表示しているだけです。まったく同じものを表示しているわけではありません。
・Java Script が動作しない環境では動作しません (あたりまえですが) 。各自で対処をしてください。
・このプログラムは、すべてのブラウザで正常に動作することは保障していません。使用は自己責任でお願いします。
～ HTMLダイアログ表示部分 ～

  <div id="firefox_dialog_back" onmousedown="return false;" oncontextmenu="return false;" onselectstart="return false;">
  <div style="clear:both;width:0px;height:0px;"><span style="display:none;">いわゆるひとつの空き要素</span></div>
  </div>
  <table id="firefox_dialog_form" onmousedown="return false;" oncontextmenu="return false;" onselectstart="return false;">
  <tr><td id="firefox_dialog_message">
  <div id="firefox_dialog_mesbox">
  message
  </div>
  </td></tr>
  <tr><td id="firefox_dialog_button">
  <input class="firefox_dialog_switch" value="OK" type="button" onClick="dialog_switch(0);"></input>
  </td></tr>
  </table>

で表示させています。「message」の部分をあらかじめ書き換えておくことも可能です。※

基本的に</body>の直前においてください。 ※ただし初期化処理を使う場合はこれと</body>の間に入れてください。初期化処理については後述。
</body> の直前に初期化処理 (下に書いてあります) 、その直前にこのHTMLが来るようにしてください。
～ Java Script について ～
dialog_switch 関数 (戻り値なし)
void=dialog_switch(p1,p2,p3,strings)
p1=0～1 (必須) : ダイアログを表示するか非表示にするかのフラグ ( 0=非表示 / 1=表示 )
p2,p3=240～,144～ (任意) : ダイアログX,Yサイズ。どちらか一方でも省略した場合は、その前で設定した値、もしくはデフォルトの値が使用されます。
strings (任意) : ダイアログ表示メッセージ (書き換え) 。省略した場合は、HTML (元のサンプルだと、「message」と書いてあるところ) に書いてある内容が表示されます。一回でもこの関数を使用して書き換えていた場合は、その書き換え後の値になります。
たとえば、何箇所かに、クリックするとダイアログを出したい場所がある場合、HTMLではひとつだけ設置し、JavaScript側で文字列やサイズを変更させて表示させる、というような感じで使ってください。
もともと表示させる内容が１つに決まっている場合は、あらかじめHTMLで表示内容を設定しておき、関数ではフラグだけを設定して表示/非表示を切り替えるだけ、という風にしてもOKです。
～ CSS について ～
このCSSを使用すると、<HTML>タグと<BODY>タグのmarginやpaddingが0になります。それによってレイアウトが崩れる党の問題があれば、bodyの代わりになるdivを設置するなどして対応してください。
Java Script でサイズを指定せず、CSSを書き換えて表示させちゃうのも手ですが、サイズ以外の部分をいじるとレイアウトが大幅に崩れる可能性がありますので、気をつけてください。
～ 初期化処理 ～
しなくても一応使えるようにはなっていますが、HTMLの (Java Script で) 

  <script type ="text/javascript"><!--
  dialog_switch(0,240,144,'test');
  //--></script>

で、非表示のまま内容を書き換えています。
しかし、このようなことをする場合、HTMLのダイアログの役割を果たす部分が設置されてから出ないと書き換えできないため、Java Script がエラーをはきます。
これを使う場合はHTMLの部分と</body>の間に書いてください。
2013/01/14 追記
この初期化処理、もしくはサイズを指定して最低一回は関数を実行しておかないと、WEBページ全体を暗くする機能が有効になりません。ご注意ください。
必要になったらもうちょっと改造するかもです。
ではまたいつか。
↓クリック (投票) お願いします～


557