原文转载来自：https://www.frbkw.com/2256/
原本做这个是因为需要做一个弹窗人脸识别的，起初是想做点击按钮后，出现新界面提示用户刷脸。
后面说写在同一个界面会合适一些要么弹窗在屏幕中间，要么就仿支付宝支付弹窗。最后还是选择了支付宝
其实也是基于官方组件修改的，弹窗的高度可以在.fr-tc类名中修改
1.底部弹窗自带遮罩
2.点击弹窗外部分会关闭弹窗
3.基于MUI 框架，自己要引入css文件
[Asm] 纯文本查看 复制代码 <link href="css/mui.min.css" rel="stylesheet" />
和js文件
[Asm] 纯文本查看 复制代码 <script src="js/mui.min.js"></script>
代码如下[Asm] 纯文本查看 复制代码 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style>
html,body{
height: 100%;
}
.fr-tc{
/* 控制弹窗高度 */
height: 40%;
}
.fr-div-w{
border-radius: 10px 10px 0px 0px;
background-color: #FFFFFF;
height: 100%;
padding: 15px;
}
.fr-btn{
display: block;
height: 40px;
width: 60%;
background-color: #14b5ff;
text-align: center;
line-height: 40px;
color: #FFFFFF;
border-radius: 4px;
margin: 50px auto;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">Popover</h1>
</header>
<div class="mui-content">
<!-- 点击触发 -->
<a class="fr-btn" href="#fengrui">有本事你点我哇！</a>
<!--mui-popover-action：表示点击时显示-->
<div class="mui-popover mui-popover-bottom mui-popover-action fr-tc" id="fengrui">
<div class="fr-div-w">
我就只是一个DIV而已，你可以我做任何事情。虽然小的只卖艺不卖身，
但是，只要你勇敢点我们就会有故事，，，，
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
| 
发表于 2020-1-17 11:34
|
发表于 2020-1-17 11:56
这个有意思
