MUI自定义底部弹窗自带遮罩层仿支付宝支付弹窗

村上春树说:如果我爱你,而你也正巧爱我。你头发乱了时候,我会笑笑地替你拨一拨,然后,手还留恋地在你发上多待几秒。但是,如果我爱你,而你不巧地不爱我。你头发乱了,我只会轻轻地告诉你,你头发乱了喔。这大概是最纯粹的爱情观,如若相爱,便携手到老;如若错过,便护他安好————网易热评(MUI自定义底部弹窗

MUI自定义底部弹窗自带遮罩层仿支付宝支付弹窗

 

原本做这个是因为需要做一个弹窗人脸识别的,起初是想做点击按钮后,出现新界面提示用户刷脸。后面说写在同一个界面会合适一些

要么弹窗在屏幕中间,要么就仿支付宝支付弹窗。最后还是选择了支付宝

 

其实也是基于官方组件修改的,弹窗的高度可以在.fr-tc类名中修改

1.底部弹窗自带遮罩

2.点击弹窗外部分会关闭弹窗

3.自己要引入css文

 <link href="css/mui.min.css" rel="stylesheet" />

和js文件

<script src="js/mui.min.js"></script>

 

 

MUI自定义底部弹窗自带遮罩层仿支付宝支付弹窗

代码如下:

<!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>

 

枫瑞博客网 一个只想努力找富婆不想努力的人
枫瑞博客网 » MUI自定义底部弹窗自带遮罩层仿支付宝支付弹窗

发表评论