ホームページ制作/SEO対策なら株式会社サイバーブレーンへ

 03-5961-5681 平日10:00~19:00

 2018-10-26

HTML5 DIALOG - ダイアログ要素2

前回の記事で
>>FORMタグ内に設置するとダイアログが出力されずにサブミットされてしまうことでした。
と書きましたが、単純なミスをしていました。まったくもって、恥ずかしいです。
buttonタグのtypeを何も指定していなかったために、このform内のbuttonがデフォルトのsubmitタイプになっていただけでした。

なお、dialogタグをサポートしているブラウザは少ない為、Googleが提供している dialog-polyfillを利用します。 この2つを 読み込みます /dialog-polyfill/dialog-polyfill.css" /dialog-polyfill/dialog-polyfill.js" そして、ダイアログタグをサポートしていない場合に対応させるために、以下の初期設定をします。
var dialogList = document.querySelectorAll('dialog');
    if (dialogList){
        for(let i=0; i<dialogList.length; i++){
            //サポートしていない場合は、dialogPolyfillが互換実装を提供する
            dialogPolyfill.registerDialog(dialogList[i]);
        }
    }

動作サンプル

このサンプルソースは以下になります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dialog 要素</title>
    <link rel="stylesheet" href="./style/style.css">
    <link rel="stylesheet" href="./style/dialog-polyfill/dialog-polyfill.css">
    <script src="./style/dialog-polyfill/dialog-polyfill.js"></script>
</head>

<body>

<form name="sampleform" method="post" action="./" class="form-container">
    <div class="form-title"><h2>ダイアログ検証</h2></div>
    <div class="form-title">お名前</div>
    <input class="" type="text" name="firstname" /><br />
    <div class="form-title">電子メールアドレス</div>
    <input class="" type="text" name="email" /><br />
    <div class="submit-container">
        <button class="submit-button" type="button">送信</button>
    </div>
    <dialog id="sendConfirmInform">
        <h2>送信確認</h2>
        <p>送信してもよろしいですか?</p>
        <button class="cancel-btn" type="button">キャンセル</button><button class="ok-btn" type="button">送信する</button>
    </dialog>

</form>
<script>
window.addEventListener('load', function () {
    //dialogPolyfillを利用して、サポートしていないブラウザでの動作を可能にする
    var dialogList = document.querySelectorAll('dialog');
    if (dialogList){
        for(let i=0; i<dialogList.length; i++){
            //サポートしていない場合は、dialogPolyfillが互換実装を提供する
            dialogPolyfill.registerDialog(dialogList[i]);
        }
    }
    
    var act=document.querySelector('button.submit-button');
    act.addEventListener('click', function (e) {
        var dom = document.getElementById('sendConfirmInform');
        dom.showModal();

        dom.addEventListener('click', function (e) {
            if (e.target.className.indexOf('cancel-btn') >= 0) {
                console.log('Cancel.');
            } else if (e.target.className.indexOf('ok-btn') >= 0) {
                document.sampleform.submit();
            }
            dom.close();
            dom.removeEventListener('click', arguments.callee);
        }, false);

        return false;
    });
    
}, false);
</script>

</body>
</html>

~この記事の著者~

サイト制作に関するご相談はこちら

 03-5961-5681 平日10:00~19:00

メールフォーム

あなたが
サイトに
求める要素
あなたがサイトに求める0要素