|
直接上代码:
- <!DOCTYPE html>
- <html lang="en" id="html">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script src="/js/jquery-3.2.1.min.js"></script>
- </head>
- <body>
- <div class="review">
- <div class="reviewName">
- <span>用户名字NAME</span>: 园区信息占位符信息占位符信息占信息占位符信息占位符信息
- </div>
- </div>
- <!--删除弹窗 -->
- <div class="deletePopup" id="maskID" style="display: none;">
- <div class="bottomTwo animetion" id="popDivID">
- <div class="delect">删除</div>
- <div class="callLine"></div>
- <div class="cancel" id="cancelID">取消</div>
- </div>
- </div>
- <style>
- .deletePopup {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100vh;
- z-index: 99999999888;
- background-color: rgba(0, 0, 0, .5);
- }
- .bottomTwo {
- background-color: #FFFFFF;
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 1rem;
- border-radius: 0.15rem .15rem 0 0;
- }
- .animetion {
- animation: animate .5s;
- overflow: hidden;
- }
- .delect {
- width: 100%;
- padding: .1rem;
- text-align: center;
- color: red;
- font-size: .16rem;
- }
- .callLine {
- width: 100%;
- height: .08rem;
- background-color: #F5F6F7;
- }
- .cancel {
- width: 100%;
- padding: .1rem;
- text-align: center;
- color: #000;
- font-size: .16rem;
- }
- @keyframes animate {
- from {
- height: 0px;
- top: 100vh;
- }
- to {
- height: 100vh;
- top: 85vh;
- }
- }
- .reviewName {
- padding: 0.08rem;
- font-size: 0.1rem;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #282828;
- }
- .reviewName span {
- color: #CB6461;
- }
- </style>
- <script>
- //打开窗口
- $(".reviewName").click(function (e) {
- $("#maskID").show();
- $(".bottomTwo").show();
- });
- //关闭窗口
- $('#cancelID').on('click', function (e) {
- $(".bottomTwo").slideUp("slow", function () {
- $(".deletePopup").hide();
- });
- })
- //h5适配
- function recalc() {
- var h = document.getElementById('html');
- var w = document.documentElement.clientWidth;
- // d代表设计宽度
- var d = 375;
- if (w >= 769) {
- h.style.fontSize = '240px';
- } else {
- h.style.fontSize = w / d * 100 + 'px';
- }
- }
- window.addEventListener("resize", recalc, false);
- document.addEventListener('DOMContentLoaded', recalc, false);
- </script>
- </body>
- </html>
复制代码
看下效果:
|
|