【实用】一个移动端简单的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弹窗组件，虽算不上高大上，但至少耐看相关推荐

modal组件 vue_开发一个简单的 Vue 弹窗组件
https://github.com/woai3c/Front-end-articlesgithub.com 一个弹窗组件通常包含两个部分,分别是遮罩层和内容层. 遮罩层是背景层,一般是半透明或不透 ...
[VSTO系列]二、简单的UI设计/QQ联系人导出（上）
接上一篇:http://www.cnblogs.com/longqi293/archive/2010/12/08/vstoforexcel1.html 在日常的生活中,QQ已经是联系我们人际关系的一条 ...
element UI el-upload组件实现视频文件上传视频回显
项目中需要提供一个视频介绍,使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL, 百度找了一番后最终实现了. HTML <el ...
Vue移动端框架Mint UI接口跨域问题
自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据 http://www.intmote.com/test.json 我现在要调用在调用接口数据的时候的时候会出现这样的报错 Ac ...
Vue移动端框架Mint UI教程-调用模拟json数据(五)
1:安装 npm install vue-resource 2:打开main.js 注册 import VueResource from 'vue-resource' Vue.use(VueResou ...
UI设计组件|临摹学习的必备
一.组件介绍 1. 什么叫组件? 组件是通过对功能及视觉表达中元素的拆解.归纳.重组,并基于可被复用的目的,形成的规范化模块.它就像组成完整框架的单元体(比如按钮.导航栏.tab栏等),具有标准规范和 ...
web前端组件开发之弹窗组件实现
widget 抽象类首先抽象出弹窗组件的一些共有属性和方法. widget抽象类中定义一个最外层容器,即整个弹窗,在widget构造函数中,添加一个属性: this.boundingBox = n ...
[UWP]使用Picker实现一个简单的ColorPicker弹窗
[UWP]使用Picker实现一个简单的ColorPicker弹窗原文:[UWP]使用Picker实现一个简单的ColorPicker弹窗在上一篇博文<[UWP]使用Popup构建UWP P ...
[C语言]一个很实用的服务端和客户端进行UDP通信的实例
前段时间发了个TCP通信的例子,现在再来一个UDP通信的例子.这些可以作为样本程序,用到开发中."裸写"socket老是记不住步骤,经常被鄙视-- 下面的例子很简单,写一个UDP的 ...

【实用】一个移动端简单的UI弹窗组件，虽算不上高大上，但至少耐看

【实用】一个移动端简单的UI弹窗组件，虽算不上高大上，但至少耐看相关推荐

最新文章

热门文章