スキップしてメイン コンテンツに移動

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を少し整えてやれば、冒頭の画像のようになります。

コメント

このブログの人気の投稿

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ

Eclipseで一通り基本的なGitを使ってみる

備忘録的にまとめておきたいと思います。おかしな点があればご指摘いただければ幸いです。 目次 環境 プロジェクト作成~初コミットまで コミットの履歴&差分を見る 元に戻す ブランチについて ブランチを作成してみる ブランチを統合するには マージする Rebaseする ローカルリポジトリからプロジェクトを取り込む コミットしたメッセージの修正 環境 Eclipse IDE for Java Developers:Juno Service Release 1 Git:上記Eclipseのプリインストール版

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。