iPentec.com  /  Doc  /  Javascript  /  HTML

目次

Webブラウザーのウィンドウ内に擬似ダイアログボックスを表示する - JavaScript

Webブラウザのウィンドウ内に擬似的なダイアログボックスを表示する方法を紹介します。

コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript" language="javascript">
    function showDialog() {
      backTarget = document.getElementById("dialogBack");
      backTarget.style.visibility = "visible";

      dialogTarget = document.getElementById("dialog");

      cx = Math.floor((window.innerWidth - 200) / 2);
      cy = Math.floor((window.innerHeight - 100) / 2);
      dialogTarget.style.left = cx + "px";
      dialogTarget.style.top = cy + "px";
      dialogTarget.style.visibility = "visible";
    }

    function hideDialog() {
      backTarget = document.getElementById("dialogBack");
      backTarget.style.visibility = "hidden";
      dialogTarget = document.getElementById("dialog");
      dialogTarget.style.visibility = "hidden";
    }
  </script>
</head>
<body>
<div>コンテンツ1</div>
<div>コンテンツ2</div>
<div>コンテンツ3</div>
<div>コンテンツ4</div>
<div>コンテンツ5</div>
<div>コンテンツ6</div>
<div>コンテンツ7</div>
<div><a href="javascript:void(0);" onclick="showDialog();">確認</a></div>

<div id="dialogBack" style="background-color:#000000; 
    position:absolute; left:0px; top:0px;
    visibility:hidden;
    min-height:100%; min-width:100%; width:100%; height:100%;
    filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;"></div>

<div id="dialog" style="position:absolute; visibility:hidden; text-align:center;
    padding-top:10px;
    background-color:#FFFFFF; width:200px; height:100px;">よろしいですか？<br />
    <br />
    
    <div style="text-align:center"><input type="button" onclick="hideDialog();"
      value="はい" /></div>
</div>
</body>
</html>

解説

<div id="dialogBack" style="background-color:#000000; 
    position:absolute; left:0px; top:0px;
    visibility:hidden;
    min-height:100%; min-width:100%; width:100%; height:100%;
    filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;"></div>
部分がダイアログ表示時の背景になります。背景色を黒にして透明度を50%に設定しています。また、positionをabsoluteにし、Top ,Leftを0に、幅と高さを100%にして画面全体に枠をかぶせて表示しています。

<div id="dialog" style="position:absolute; visibility:hidden; text-align:center;
    padding-top:10px;
    background-color:#FFFFFF; width:200px; height:100px;">よろしいですか？<br />
    <br />
部分がダイアログボックス枠になります。背景色を白にし確認メッセージとボタンを枠内に表示します。

function showDialog() {
  backTarget = document.getElementById("dialogBack");
  backTarget.style.visibility = "visible";

  dialogTarget = document.getElementById("dialog");

  cx = Math.floor((window.innerWidth - 200) / 2);
  cy = Math.floor((window.innerHeight - 100) / 2);
  dialogTarget.style.left = cx + "px";
  dialogTarget.style.top = cy + "px";
  dialogTarget.style.visibility = "visible";
}
上記がダイアログボックスを表示するコードです。背景のDIV枠をIDから取得し、visibilityを表示に変えます。ダイアログの枠のDIVタグもIDから取得しbisibilityを変更して表示します。またleftとtopの位置を算出しダイアログがWebブラウザの表示領域の中央に表示されるようにします。

function hideDialog() {
  backTarget = document.getElementById("dialogBack");
  backTarget.style.visibility = "hidden";
  dialogTarget = document.getElementById("dialog");
  dialogTarget.style.visibility = "hidden";
}
ダイアログボックスを非表示にするコートです。背景のDIV枠、ダイアログボックス枠のDIV枠をIDから取得しvisibilityをhiddenにしダイアログボックスを非表示にします。

実行結果

ページ表示直後は下図の画面が表示されます。


[確認]リンクをクリックするとダイアログボックスが表示されます。また、背景が暗くなります。


ダイアログボックス内の[OK]ボタンをクリックするとダイアログボックスは非表示になります。

注意

上記のコードは画面領域がスクロールする場合には正しく動作しません。領域がスクロールする場合は、次セクションのコードを利用します。

画面領域がスクロールする場合

画面がスクロールする場合は上記のコードでは正しく動作しません。スクロールする場合は以下のコードに変更します。

コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript" language="javascript">
    function showDialog() {
      backTarget = document.getElementById("dialogBack");

      var MaxHeight = Math.max(
        Math.max(document.body.clientHeight, document.body.scrollHeight),
        Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight));
      target.style.height = MaxHeight+"px";

      var MaxWidth = Math.max(
        Math.max(document.body.clientWidth, document.body.scrollWidth),
        Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth));
      target.style.width = MaxWidth + "px";

      backTarget.style.visibility = "visible";

      dialogTarget = document.getElementById("dialog");

      cx = Math.floor((window.innerWidth - 200) / 2) + document.documentElement.scrollLeft;
      cy = Math.floor((window.innerHeight - 100) / 2)+ document.documentElement.scrollTop;
      dialogTarget.style.left = cx + "px";
      dialogTarget.style.top = cy + "px";
      dialogTarget.style.visibility = "visible";
    }

    function hideDialog() {
      backTarget = document.getElementById("dialogBack");
      backTarget.style.visibility = "hidden";
      dialogTarget = document.getElementById("dialog");
      dialogTarget.style.visibility = "hidden";
    }
  </script>
</head>
<body>
<div>コンテンツ1</div>
<div>コンテンツ2</div>
<div>コンテンツ3</div>
<div>コンテンツ4</div>
<div>コンテンツ5</div>
<div>コンテンツ6</div>
<div>コンテンツ7</div>
<div><a href="javascript:void(0);" onclick="showDialog();">確認</a></div>

<div id="dialogBack" style="background-color:#000000; 
    position:absolute; left:0px; top:0px;
    visibility:hidden;
    min-height:100%; min-width:100%; width:100%; height:100%;
    filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;"></div>

<div id="dialog" style="position:absolute; visibility:hidden; text-align:center;
    padding-top:10px;
    background-color:#FFFFFF; width:200px; height:100px;">よろしいですか？<br />
    <br />
    
    <div style="text-align:center"><input type="button" onclick="hideDialog();"
      value="はい" /></div>
</div>
</body>
</html>

解説

変更点は下記となります。画面がスクロールする場合は、ダイアログのレイヤーの表示位置に現在のスクロール量を加算する処理を追加します。
  cx = Math.floor((window.innerWidth - 200) / 2) + document.documentElement.scrollLeft;
  cy = Math.floor((window.innerHeight - 100) / 2)+ document.documentElement.scrollTop;

画面をフェードするコードに関しては、下記の修正をします。詳細はこちらの記事を参照してください。
      backTarget = document.getElementById("dialogBack");

      var MaxHeight = Math.max(
        Math.max(document.body.clientHeight, document.body.scrollHeight),
        Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight));
      target.style.height = MaxHeight+"px";

      var MaxWidth = Math.max(
        Math.max(document.body.clientWidth, document.body.scrollWidth),
        Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth));
      target.style.width = MaxWidth + "px";

      backTarget.style.visibility = "visible";
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-01-07
作成日: 2011-06-27
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.