HTML 5.2の新しいオリジナル要素を見てみましょう

4309 ワード
先端 httml 5 dialog
原文住所:Meet the New Dialog Element作者:Keith
1ヶ月も前にはHTML 5.2正式にはW3Cの推奨基準(REC)では、新しいオリジナルモードダイアログボックス要素が提案されています.,一見すると、新しい要素のように感じられるかもしれませんが、作者が最近遊んでいるとき、それは確かに期待と面白い要素であることに気づきました.ここで共有します.
これはの最も基本的な例です.

    Native dialog box!

ここで、open属性は、dialogが表示されていることを示します.openがない場合、dialogは非表示になります.JavaSciptを使用して表示できます.この場合、dialogは次のようにレンダリングされます.
ページの上に表示され、コンテンツの上に表示されます.デフォルトでは、ページの上に表示されます.
きほんそうさ にはいくつかの と があります.JavaScipt要素を簡単に処理できます.最も多く使用される可能性は と です.
const modal = document.querySelector('dialog');

// makes modal appear (adds `open` attribute)
modal.showModal();

// hides modal (removes `open` attribute)
modal.close();
dialogを使用してshowModal()を開くと、close()の周囲にシャドウが追加され、showModal()要素とのユーザーの相互作用が阻止されます.デフォルトでは、シャドウはdialogで、dialogを使用して変更できます. diglogを押すと を閉じることができ、CSSをトリガーするボタンを提供することもできます.
もう1つの方法はEscであり、dialogを表示することもできるが、close()とは異なり、ユーザーは非show()要素と対話することができる.
ブラウザのサポートとPolyfill
現在、dialogサポートshowModal()のみ、dialogはchromeでを許可しなければ正常に使用できません.Firefoxは近い将来サポートされると思います.
上の図はcaniuseです.comabout:config特性主流ブラウザの互換性について
幸いなことに、dialog-polyfillを使用してこのような気まずい状況を緩和することができます.それはdom.dialog_element.enabledの動作を提供するだけでなく、デフォルトのスタイルも含まれています.私たちはFirefoxを使用してインストールすることもできます.また、dialogラベルを使用して参照することもできます.現在、JavaScriptおよびそれ以上のバージョンを含む各主流ブラウザがサポートされています.
ただし、使用する場合、各npmは次の文で初期化する必要があります.
dialogPolyfill.registerDialog(dialog);

また、ブラウザの元の動作に取って代わるものではありません.
スタイル
モードボックスのオンとオフは基本ですが、これは十分ではありません. はスタイルがあまりきれいではありません.そのため、スタイルをカスタマイズする があります.また、 IE 9を することで、dialog の ろ のスタイルを することができます.
dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

いブラウザとの のため、を する 、::backdropは しませんが、はpolyfillの ろに::backdrop を します.
dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

に、polyfillにもっと くの を する です. にはdialog,.backdropとbialogが まれています.

    
sweet dialog

    

        
This is a sweet dialog, which is much better.

に、いくつかのheaderを すると、あなたが むものを に れることができます.
ステップアップオペレーション
に、bodyから のユーザの を することが ましい.footerを じると、CSSにdialogを し、dialog のclose() で できます.
modal.close('Accepted');

console.log(modal.returnValue); // logs `Accepted`

もちろん、 できる のイベントもあります. も なイベントは、string( じるdialogのときにトリガーされる)、またreturnValue(ユーザーがcloseを じるdialogのときにトリガーされる)です.
また、cancelの のシャドウをクリックして じることも できるかもしれません.もちろん、これも があります.クリックシャドウはEscのクリックイベントをトリガーし、dialogのサブ がdialog を めている は、dialogのクリックを することで、dialogがdialogである に じることができます.
modal.addEventListener('click', (event) => {
    if (event.target === modal) {
        modal.close('cancelled');
    }
});

もちろん、これは ではありませんが、それは かに で、もしあなたがもっと い があれば、コメントの で することを します.
まとめ
こんなにたくさん ったのに、 で に したほうがいいです. もdemoを ってくれました. にしてください.
ES 6構文(三)配列
HTML 5移動端視口に関する問題