# html筆記
跳出式對話匡

<style>
    .dialog{
            position: fixed;
            top: 100px;
            left: 50%;
            transform: translate(-120px,0px);
            width: 240px;
            padding: 10px;
            border: 1px solid #0a53be;
            background-color: #0dcaf0;
            box-shadow: #79ff6c;
            display: none;
        }
        .dialog>.close{
            position: absolute;
            top:2px;
            right: 2px;
            cursor: pointer;
        }
</style>

****

<button onclick="showdialog()">顯示資訊</button>
<div id="dialog" class="dialog">
    <div onclick="closedialog()" class="close">X</div>
    對話內容在這
</div>

****

<script>
    let dialog;
    window.onload=function (){
        dialog=document.getElementById('dialog');
    }
    function  showdialog(){
        dialog.style.display="block";
    }
    function  closedialog(){
        dialog.style.display="none"
    }
</script>