Web前端值浏览器原生弹窗、面板、事件、dialog

智码帮MJ682517

已于 2024-08-30 18:50:51 修改

阅读量3.5k

点赞数 7

分类专栏： Web前端 Html Style 文章标签： html 前端 web web前端 css

于 2023-09-05 23:16:51 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/132702242

版权

Web前端同时被 3 个专栏收录

362 篇文章 5 订阅

订阅专栏

Style

92 篇文章 0 订阅

订阅专栏

Html

84 篇文章 1 订阅

订阅专栏

效果

代码

<button onclick="dog.show()">弹窗(方式一)</button>
<button onclick="dog.showModal()">弹窗(方式二)</button>

<dialog id="dog">
    <div class="win">
        <p>This is a window</p>
        <p>
            <input type="text">
        </p>
        <p>
            <input type="text">
        </p>
        <button onclick="dog.close()">关闭</button>
    </div>
</dialog>

Style

#dog {
    border-radius: 10px;
}

#dog::backdrop {
    background: rgba(0, 0, 0, .5);
}

解析

弹窗(方式一)
没有遮罩层。

弹窗(方式二)
有遮罩层。

dialog

MDN
html<dialog>元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。
tabindex属性不能被使用在元素上。
指示这个对话框是激活的和能互动的。当没有设置open属性时，对话框不应该显示给用户。推荐使用.show()或.showModal()方法来渲染对话框，而不是使用open属性。
不需要考虑兼容性，使用tab切换输入框的时候不会影响到页面上的输入框，非常方便。==

其他
敬请期待…