Webページを暗くしてダイアログのようなものを表示させる

Webページでもたまに見かけますが、Androidとかでダイアログを表示させると、ダイアログの背景は暗くしてダイアログを際立たせるようなエフェクトがありますね。

※Webで自作したもの

今ならフラットデザインがーと聞くので、流行とは逆行しますが。フラットデザインなら、ウィンドウが重なったようなエフェクトはそもそもなくて、ダイアログの中身がそのまま一画面として遷移するといった感じでしょうか。

とは言え、ダイアログは操作的にわかりやすくていいと思いますし、簡単なものであればライブラリを組み込まなくてもググったら意外とぱっと実装できたのでメモしておきます。

確認環境

Google Chrome バージョン 27.0.1453.110 m
Opera 12.15

仕組み(CSS)

ダイアログを表示したいWebページに対して、DIVタグを一つ用意してやります⇒①
これの背景を黒で塗りつぶし、opacity: 0.5の半透明くらいにしてやります。position:absoluteでWebページ一杯になるようwidthとheightを指定してやります。
次に、ダイアログ用のDIVタグを用意して⇒②
これも、position:absoluteでtop,leftで位置を真ん中あたりにし影をつけたり、角丸にしたりすばダイアログっぽくなります。

これにJavaScriptで表示・非表示の動作や、何かダイアログ上のボタン押されたなどのイベント処理を追加してやればOKです。

サンプルプログラム

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#content {
padding:10px;
}

#dialog_back {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    background-color: #000;
    opacity: 0.5;
}
#dialog_body {
    position: absolute;
    border-radius: 6px 6px 6px 6px;
    left:75px;
    top:150px;
    width:200px;
    height:150px;
    background-color: #FFF;
    box-shadow: 6px 6px 6px rgba(0,0,0,0.4);  /* CSS3 */
    padding:50px;
}
</style>
<script type="text/javascript">
// ダイアログを表示
function showDialog() {
    var html = document.getElementById("content").innerHTML;

    html = html + '<div id="dialog">'
                +  '<div id="dialog_back" style="height:' // ①のdiv
                +   getBrowserHeight() + 'px;"></div>'
                +  '<div id="dialog_body">'    // ②のdiv
                +  '<input type="button" onclick="closeDialog()" value="閉じる">'
                + '</div>'
                + '</div>';

    document.getElementById("content").innerHTML = html;
}
// 画面の高さを取得
function getBrowserHeight() {
    if ( window.innerHeight ) {
            return window.innerHeight;
    }
    else if ( document.documentElement &&
            document.documentElement.clientHeight != 0 ) {
            return document.documentElement.clientHeight;
    }
    else if ( document.body ) {
            return document.body.clientHeight;
    }
    return 0;
}
// ダイアログを閉じる
function closeDialog() {
    var delNode = document.getElementById("dialog");
    delNode.parentNode.removeChild(delNode);
}
</script>
</head>
<body>
<div id="content">
hogeeee
</div>
<input type="button" onclick="showDialog()" value="ダイアログ表示">
</body>
</html>

サンプルを表示させると、本文「hogeeee」とボタンが表示されます。

ボタンをクリックすると、背景を暗くしてダイアログが表示されるシンプルなものです。

ダイアログの位置をtopとleftの固定値で指定しているので中途半端な位置ですが....画面幅から真ん中を計算してtopとleftを割り当てても良いかもしれません。JavaSctiptについては、

showDialog()はダイアログ用のHTML（DIVタグ等）を作成して、id:contentにinnerHTMLで追加しています
getBrowserHeight()は背景（①のdiv）の黒を敷き詰めるために、画面の高さをこの関数で取得しています。このやり方のみの欠点は、ブラウザのサイズを変更されると、黒く塗りつぶしていない部分が露わになることです。
closeDialog()はid:contentに追加したid:dialogを見つけて削除しています。削除することで、ダイアログおよび黒背景がなくなります。

このCSSを少し整えてやれば、冒頭の画像のようになります。

参考：ブラウザの画面サイズの取得(javascript) - my-notebook

PR:Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
PR:レスポンシブWebデザイン「超」実践デザイン集中講義

takaiwa.net

このブログを検索