HTML5 & custom element & template
2024-08-30 03:01:23
HTML5 & custom element & template
template
https://codepen.io/xgqfrms/pen/eYYExvp
https://css-tricks.com/creating-a-custom-element-from-scratch/
<template id="dialog-template">
<script>
document.getElementById('launch-dialog').addEventListener('click', () => {
const wrapper = document.querySelector('.wrapper');
const closeButton = document.querySelector('button.close');
const wasFocused = document.activeElement;
wrapper.classList.add('open');
closeButton.focus();
closeButton.addEventListener('click', () => {
wrapper.classList.remove('open');
wasFocused.focus();
});
});
</script>
<style>
.wrapper {
opacity: 0;
transition: visibility 0s, opacity 0.25s ease-in;
}
.wrapper:not(.open) {
visibility: hidden;
}
.wrapper.open {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
visibility: visible;
}
.overlay {
background: rgba(0, 0, 0, 0.8);
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
.dialog {
background: #ffffff;
max-width: 600px;
padding: 1rem;
position: fixed;
}
button {
all: unset;
cursor: pointer;
font-size: 1.25rem;
position: absolute;
top: 1rem;
right: 1rem;
}
button:focus {
border: 2px solid blue;
}
</style>
<div class="wrapper">
<div class="overlay"></div>
<div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="content">
<button class="close" aria-label="Close">️</button>
<h1 id="title">Hello world</h1>
<div id="content" class="content">
<p>This is content in the body of our modal</p>
</div>
</div>
</div>
</template>
<button id="launch-dialog">Launch dialog</button>
const template = document.getElementById('dialog-template');
document.body.appendChild(
document.importNode(template.content, true)
);
#launch-dialog {
background: tomato;
border-radius: 4px;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
padding: 0.5rem 1rem;
position: static;
}
web components & custom elements
https://www.html5rocks.com/en/tutorials/webcomponents/customelements/
https://developers.google.com/web/fundamentals/web-components/customelements
HTML5 & command element
https://www.quackit.com/html_5/tags/html_command_tag.cfm
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/command
<command
type="command"
label="Save"
icon="icons/save.png"
onclick="save()"
/>
2018
https://caniuse.com/#search=command
2020
https://caniuse.com/#search=command
最新文章
- AndroidStudio Rename Package
- Parallel 试验
- ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
- Android 6.0权限
- MapReduce排序输出
- iOS UIBezierPath知识介绍
- Eclipse导入工程中文乱码问题
- 使用DDMS测试安卓手机APP的性能（android）
- php单引号、双引号与数据库
- MSSQL BACKUP WEBSHELL
- cmd dos 下 无法显示中文
- python的正则表达式 re
- linux添加swap
- js 动态 key value
- 02 Java类的加载机制
- 【推荐】免费，19 款仿 Bootstrap 后台管理主题下载
- 通过分析HSL/HSB获取图片主色调
- es6 语法 （symbol）
- Javascript重点汇总
- c++中的类（class）-----笔记（类简介）