HTMLやCSSで自前のダイアログを作成する | 極めて冴えない普通人の気まぐれブログ

こんばんは。きわさです。

前回の記事で Alert や Confirm でダイアログを表示する方法を書きましたが、今回はそれらを使わずに自前でダイアログを用意する方法についてです。

まずはHTMLです。
HTMLでダイアログのレイアウトを用意しておきます。

<body>
    <!-- 本来のコンテンツ -- 省略 -->

    <div id="dialog">
        <div id="dialogBackground"></div>
        <div id="dialogContent">
            <div id="dialogMsg">
                ダイアログメッセージ
            </div>
            <div>
                <input type="button" value="はい" onclick="func();" />
                <input type="button" value="いいえ" onclick="dialogHide();" />
            </div>
        </div>
    </div>
</body>

まず、ダイアログのメッセージやボタンなどを表示する領域をdiv(id=dialogContent)で用意しています。
自前で作る場合、この中が重要になります。
今回は例なので、凝ったレイアウトにはせずにメッセージとボタン2つをただ表示するだけにしています。

もうひとつ、中身のないdiv(id=dialogBackground)があります。
これは、ダイアログ表示時に、他の操作ができないよう画面を覆ってふたをするための領域です。

そしてこれらをひとつにくくっているのがdiv(id=dialog)です。

次にcssです。

#dialog {
    display:none;
}
#dialogBackground {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.05;
}
#dialogContent {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: #dddddd;
    text-align: center;
    border: solid 1px;
}

まず、ダイアログはあらかじめ非表示にするため、#dialogでまとめて非表示にしています。
#dialogBackgroundについては、絶対位置で左上から幅と高さ100%にすることで全体を覆っています。
opacityは透明度です。0.00～1.00で低いほど透明です。0.05なので限りなく透明に近い黒です。
そしてダイアログ本体の#dialogContentですが、leftやらmargin-leftやらで色々やっていますが、これは、幅と高さの半分だけずらして中央表示にしています。この辺はレイアウト次第で変わるところですね。

そして最後にJavascriptです。

function func() {
    // ここに「はい」選択時の処理
    
    dialogHide();
    return;
}
function dialogHide() {
    var dialog = document.getElementById("dialog");
    dialog.style.display = "none";
    return;
}
function dialogShow() {
    // 必要に応じてここに表示前処理(表示メッセージ変更処理など)を入れる

    var dialog = document.getElementById("dialog");
    dialog.style.display = "block";
    return;
}

func() は「はい」選択時に呼ばれ、処理を行ってからダイアログを非表示にします。「いいえ」選択時はそのままダイアログ非表示処理のみ行います。
dialogShow() と dialogHide() は、id=dialogのdiv 要素を取得して、表示と非表示を切り替えています。

以上がダイアログを自前で作る方法です。

コメントを残す