philosophyship-mobile
Version:
philosophship-mobile 手机端H5 ui 样式库
63 lines • 2.43 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../src/tuitui-ui.css">
<title>推推UI-模态框</title>
</head>
<body>
<div class="tt-header">
<div class="left"><i class="fa fa-chevron-left"></i></div>
<div class="title">推推UI-模态框</div>
<div class="right"><i class="fa fa-ellipsis-h"></i></div>
</div>
<div class="tt-navbar">
<a class="navbar-item">
<i class="fa fa-home icon"></i>
<span class="name">首页</span>
</a>
<a class="navbar-item active">
<i class="fa fa-list icon"></i>
<span class="name">分类</span>
</a>
<a class="navbar-item">
<i class="fa fa-search icon"></i>
<span class="name">发现</span>
</a>
<a class="navbar-item">
<i class="fa fa-user-o icon"></i>
<span class="name">我的</span>
</a>
</div>
<div class="tt-content">
<p>内容区</p>
</div>
<!-- 模态框 -->
<div class="tt-modal">
<div class="tt-mask"></div>
<div class="tt-modal-wrap">
<div class="tt-modal-body">
<p>您的会员即将到期，请及时续费，以免影响您的权益。</p>
</div>
<!-- <div class="tt-modal-footer">
<a class="tt-btn">下次再说</a>
<a class="tt-btn">立即续费</a>
</div> -->
<div class="tt-modal-footer">
<a class="tt-btn">我知道了</a>
</div>
</div>
</div>
<!-- 海报样式模态框 -->
<div class="tt-modal show">
<div class="tt-mask"></div>
<div class="tt-modal-wrap">
<div class="tt-modal-body no-padding">
<img class="tt-modal-img" src="./img/modal-test.jpeg" alt="">
</div>
<i class="fa fa-close tt-modal-close"></i>
</div>
</div>
</body>
</html>