原生js+svg实现简洁清爽的模态弹出框弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:原生js+svg实现简洁清爽的模态弹出框弹出层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --body-color: #333; --body-bg: #fff; --emphasis-color: #111; --accent-color: dodgerblue; --secondary-bg: #f5f5f5; --border-color: rgba(0,0,0,.15); --modal-padding-x: 1.25rem; --modal-padding-y: .75rem; } @media (prefers-color-scheme: dark) { :root { --body-color: #888; --body-bg: #222; --emphasis-color: #fff; --secondary-bg: #252525; --border-color: rgba(255,255,255,.15); } } html { font-size: 16px; } body { padding: 1.5rem; margin: 0; font: 1rem/1.5 sans-serif; color: var(--body-color); background-color: var(--body-bg); } .btn { display: inline-flex; padding: 0.5rem 1rem; margin: 0; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--emphasis-color); background: none; border: 1px solid var(--border-color); border-radius: 0.375rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); cursor: pointer; } .btn:not(:disabled):hover, .btn:not(:disabled):focus, .btn:not(:disabled):active, .btn:not(:disabled)[active] { color: #fff; background-color: var(--accent-color); border-color: var(--accent-color); } .btn-close { padding: 0.25rem; line-height: 1; background-color: transparent; border: 0; border-radius: 0.25rem; box-shadow: none; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } dialog { position: relative; z-index: 100; width: 420px; max-width: 100%; padding: var(--modal-padding-y) var(--modal-padding-x); color: var(--body-color); background-color: var(--secondary-bg); background-clip: padding-box; border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); } dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); animation: 0.5s fade-in; } dialog > header { position: -webkit-sticky; position: sticky; top: calc(var(--modal-padding-y) * -1); display: flex; justify-content: space-between; align-items: center; padding: var(--modal-padding-y) var(--modal-padding-x); margin: calc(var(--modal-padding-y) * -1) calc(var(--modal-padding-x) * -1) var(--modal-padding-y); font-weight: 600; color: var(--emphasis-color); background-color: inherit; border-bottom: 1px solid var(--border-color); } dialog > header [data-close] { margin-right: -0.25rem; } [open] + .backdrop { position: fixed; inset: 0; background-color: rgba(255, 0, 0, 0.25); } </style> </head> <body translate="no" &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0