window原生弹窗

    //dialog 可以设置open属性 然后设置该属性,弹窗就会在页面加载完弹出来
    //还有两个方法 showModel方法弹窗是有遮罩层的 操作不了其他dom元素,他是具有最高优先级的
    //show方法弹窗是没有遮罩层的,可以操作后面的dom元素
    //close方法就是关闭弹出框
    //此外我们还可以通过backdrop设置遮罩层的颜色和样式
    #dog::backdrop{
            background: #ff440080;
            backdrop-filter: blur(10px);
        }
<button onclick="dog.showModal()" id="bts">弹窗</button>
    <dialog id="dog" >
        <div class="dia">
            <div><p class="ps">删除</p></div>
            <div class="del">你确定要删除dom元素吗</div>
            <div class="btns">
                <button onclick="dog.close()">关闭</button>
                <button id="close">取消</button>
            </div>

        </div>
    </dialog>
    const body = document.body;
    let dog = document.quertSelector('#dog');
    let bts = document.querySelector('#bts');
    let close = document.querySelector('#close');
    bts.addEventListener('click',()=>{
        dog.showModal()
        //如果有滚动条我们还可以在弹出框弹出来的时候把body的滚动条隐藏掉
        body.style.overflow='hidden';
    })
    close.addEventListener('click',()=>{
        dog.close()
        body.style.overflow='';
    })