Skip to content

HTML5新玩具

新增了布局标签、状态标签、列表标签、文本标签、表单控件标签、input新增type属性值、视频标签、音频标签 全局属性、兼容性处理

dialog

原生HTML也有弹框啦,哈哈哈~~ 不想用组件库的弹窗可以用这个

html
<button onclick="openDialog">打开Dialog</button>
<dialog id="loginDialoog">
    <p>content....</p>
</dialog>
js
//打开弹窗
function openDialog(){
    document.getElementById("loginDialog").showModal();
}
//关闭弹窗
function closeDialog(){
    document.getElementById("loginDialog").close();
}

popover

这个弹出后页面没有遮罩,当打开时,弹出框元素将出现在所有其他元素之上,即在顶层上,并且不会受到父元素的 position 或 overflow 样式的影响。

html
<button popovertarget="my-popover">打开弹出框</button>
<popover id="myPopover">
    <p>content....</p>
</popover>