【实用】一个移动端简单的UI弹窗组件，虽算不上高大上，但至少耐看
生活随笔
收集整理的這篇文章主要介紹了
【实用】一个移动端简单的UI弹窗组件，虽算不上高大上，但至少耐看
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
點擊圖片放大看效果
上代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"><style>/*彈窗----------------------------------------*/.alert {background: #00000055;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;display: flex;justify-content: center;align-items: center;} .alert[hidden] {display: none;} .alert-win {width: 384px;border-radius: 6px;background: #fff;box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .2);overflow: hidden;} .alert-win .header {background: #f2f5fa;padding: 24px 32px;} .alert-win .header .header-top {display: flex;justify-content: space-between;align-items: center;} .alert-win .header .header-top h3 {margin: 0;padding: 0;} .alert-win .header p {padding: 0;margin: 16px 0 0 0;font-size: 14px;color: rgba(41, 47, 58, .7);letter-spacing: 0;line-height: 22px;} .alert-win .footer {display: flex;justify-content: space-between;padding: 16px 32px;background: #fff;box-shadow: 0 -1px 0 0 rgba(192, 196, 204, .4);text-align: right;} .alert-win .footer > * {margin: 0 5px;} .alert-win .footer > *:first-of-type {margin-left: 0;} .alert-win .footer > *:last-of-type {margin-right: 0;}/*關閉按鈕----------------------------------------*/.close-btn {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;width: 24px;height: 24px;font-size: 16px;cursor: pointer;display: inline-block;font-style: normal;position: relative;text-align: center;user-select: none;} .close-btn:after {content: "";position: absolute;margin-top: -21px;display: block;width: 100%;height: 100%;border-radius: 100%;background-color: rgba(0, 0, 0, .08);opacity: 0;transform: scale(.5);transition: all .2s cubic-bezier(.175, .885, .32, 1.275);} .close-btn:hover:after {opacity: 1;transform: scale(1.4);}/*藍色按鈕----------------------------------------*/button {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .2s ease-out;cursor: pointer;height: 50px;width: 100%;border: 1px solid rgba(51, 100, 237, .35);color: #fff;font-size: 16px;font-weight: bold;border-radius: 3px;background: linear-gradient(180deg, #648CFF 0%, #4172FA 100%);box-shadow: 0 3px 4px 0 rgba(44, 71, 146, .32), inset 0 -2px 0 0 #3262e6;text-align: center;line-height: 46px;user-select: none;} button:hover {opacity: .9;box-shadow: none;} button:focus, button:active {outline: none;background: linear-gradient(180deg, #4d7bff, #154deb);transform: scale(.97);} button[disabled] {color: #fff;background: #b0c7ff;pointer-events: none;cursor: default;box-shadow: none;}/*白色按鈕----------------------------------------*/button[white] {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .2s ease-out;cursor: pointer;width: 100%;height: 50px;border: none;border-radius: 3px;font-size: 16px;font-weight: bold;color: #292f3a;letter-spacing: 0;outline: none;background: linear-gradient(-180deg, #fff 8%, #f2f2f7 97%);box-shadow: 0 2px 3px 0 rgba(44, 71, 146, .32), 0 -1px 1px 0 rgba(44, 71, 146, .1);} button[white]:hover {background: linear-gradient(-180deg, #f2f2f7 20%, #f2f2f7 97%);box-shadow: none;color: #3973ff;border: none;} button[white]:active, button[white]:active {background: #d8dde6;transform: scale(.97);} button[white][disabled] {background: rgba(216, 221, 230, .8) !important;pointer-events: none;cursor: default;color: white;box-shadow: none;}</style>
</head>
<body><button onclick="showAlert()">點擊顯示彈窗</button>
<div class="alert" hidden><div class="alert-win"><div class="header"><div class="header-top"><h3>對話框標題</h3><i class="close-btn" onclick="hideAlert()">?</i></div><p>使用 AI 動態判斷網站當前的攻擊勢態，并結合每次請求的多維度數據組合，AI 能夠做到對每一次請求使用不同的防御能力組合。</p></div><div class="content"><br><br><p style="text-align: center;">正文內容</p><br><br></div><div class="footer"><button white onclick="hideAlert()">取消</button><button onclick="hideAlert()">確定</button></div></div>
</div>
</body>
<script>function showAlert() {document.querySelector(".alert").removeAttribute("hidden");}function hideAlert() {document.querySelector(".alert").setAttribute("hidden", true);}
</script>
</html>總結
以上是生活随笔為你收集整理的【实用】一个移动端简单的UI弹窗组件，虽算不上高大上，但至少耐看的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【实用】一组原创原生样式的基础控件、UI
- 下一篇： 【实现手机端上滑滚动加载列表】判断页面是