HTMLのdialogタグの使い方【モーダルダイアログを素早く実装】

HTML

<dialog id="myDialog">これがダイアログです。</dialog>
<button class="btnOpen">開く</button>    

JavaScript

var myDialog = document.getElementById("myDialog");
var btnOpen = document.querySelector(".btnOpen");
btnOpen.addEventListener("click",function(){
    myDialog.showModal();
    //myDialog.show();
});    

HTML

<dialog id="myDialog">
    <p>これがダイアログです。</p>
    <button class="btnClose">閉じる</button>
</dialog>
<button class="btnOpen">開く</button>    

JavaScript

/*省略*/
var btnClose = document.querySelector(".btnClose");
btnClose.addEventListener("click",function(){
    myDialog.close();
});

HTML

<dialog id="myDialog">
    <header>
        <span>ダイアログ</span>
        <button class="btnClose"><i class="fas fa-times"></i></button>
    </header>
    <div class="inner">
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト。</p>
    </div>
</dialog>
<button class="btnOpen">開く</button>    

CSS

dialog{
    padding:0;
    border-radius:5px;
    box-shadow:3px 3px 5px 0px rgba(0,0,0,.2);
}
dialog header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding:.5em;
    background-color: black;
    border:solid 2px black;
    color:white;
    font-weight:bold;
    border-top-left-radius:1px;
    border-top-right-radius:1px;
}
dialog header button.btnClose{
    background-color:transparent;
    border:none;
    color:darkred;
    font-size:1.5em;
}
@media (hover:hover){
    dialog header button.btnClose:hover{
        cursor: pointer;
    }
}
dialog .inner{
    padding:.5em 1em;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

CSS

dialog::backdrop{
    background-color:#101010;
    opacity: .8;
}

CSS

dialog[open]{
    animation:openDialog 1s forwards;
}
@keyframes openDialog{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}