HTML で非常にシンプルなダイアログを作成する方法

みなさん、こんにちは.この短くて簡単なチュートリアルへようこそ.

私たちは皆、可能な限り簡単な方法でモーダルを追加したいと考えています. MDN を探索しているときに、これまで気づかなかった完璧な要素を見つけました!!

ダイアログの構文

あなたが私に尋ねるなら、かなり簡単です 0.o

<dialog>
    <!--Dialog Content-->
    <div>Hello World !!!!!!!</div>
</dialog>

待ってください、しかしこれは何もしませんか?

はい、これはまだ何もしません
ダイアログ要素では、open 属性が存在するまでダイアログは表示されません.

これは動作するはずです --->

<dialog>
    <!--Dialog Content-->
    <div>Hello World !!!!!!!</div>
</dialog>

出力



したがって、open 属性は非常に重要です.この要素は JavaScript で自動化することもできます.

<!--HTML section-->
<button onclick="openDialog()">Open Dialog</button>

<dialog id="dialog">
    <div>Wow this is awesome !!!!!</div>
    <button onclick="closeDialog()">Close</button>
</dialog>


<!--JavaScript-->
<script>
    //Opens Dialog
    function openDialog(){
        document.getElementById("dialog").show();
    }

    //Closes Dialog
    function closeDialog(){
        document.getElementById("dialog").close();
    }
</script>

この関数は、show メソッドでダイアログを開き、close メソッドで閉じます.

使い方はとってもカンタン!!

ペンを見てください.

この短いチュートリアルを読んでいただきありがとうございます

私を好き、共有、フォローすることを忘れないでください