前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第126天:移动端-原生实现响应式模态框

第126天:移动端-原生实现响应式模态框

作者头像
半指温柔乐
发布2018-09-11 10:25:07
1.3K0
发布2018-09-11 10:25:07
举报
文章被收录于专栏:前端知识分享

下面采用HTML+CSS+JavaScript实现模态框,并采用Flex布局和多媒体查询实现响应式。

一、模态框HTML代码

代码语言:javascript
复制
 1 <!DOCTYPE html>  
 2 <html lang="en">  
 3 <head>  
 4     <meta charset="UTF-8">  
 5     <title>模态框实现</title>  
 6     <link rel="stylesheet" href="css\modal.css" type="text/css">  
 7 </head>  
 8 <body>  
 9 <button class="btn" id="showModel">模态框展示</button>  
10 <div id="modal" class="modal">  
11     <div class="modal-content">  
12         <header class="modal-header">  
13             <h4>模态框标题</h4>  
14             <span class="close">×</span>  
15         </header>  
16         <div class="modal-body">  
17             <p>HTML+CSS+JS原生实现响应式模态框演示!</p>  
18         </div>  
19         <footer class="modal-footer">  
20             <button id="cancel">取消</button>  
21             <button id="sure">确定</button>  
22         </footer>  
23     </div>  
24 </div>  
25 </body>  
26 </html>  

首先定义模态框的overlayer,然后定义模态框的内容包括header(带关闭按钮)、bodyfooter

二、模态框CSS代码

代码语言:javascript
复制
  1 h4{  
  2     margin-left: 20px;  
  3 }  
  4 p{  
  5     text-align: center;  
  6 }  
  7 .btn{  
  8     width: 100px;  
  9     height: 35px;  
 10     border-radius: 5px;  
 11     font-size: 16px;  
 12     color: white;  
 13     background-color: cornflowerblue;  
 14 }  
 15 .btn:hover, .btn:focus{  
 16     background-color: #95b4ed;  
 17 }  
 18 .modal{  
 19     display: none;  
 20     width: 100%;  
 21     height: 100%;  
 22     position: fixed;  
 23     left: 0;  
 24     top: 0;  
 25     z-index: 1000;  
 26     background-color: rgba(0,0,0,0.5);  
 27 }  
 28 .modal-content{  
 29     display: flex;  
 30     flex-flow: column nowrap;  
 31     justify-content: space-between;  
 32     width: 50%;  
 33     max-width: 700px;  
 34     height: 40%;  
 35     max-height: 500px;  
 36     margin: 100px auto;  
 37     border-radius:10px;  
 38     background-color:#fff;  
 39     -webkit-animation: zoom 0.6s;  
 40     animation: zoom 0.6s;  
 41     resize: both;  
 42     overflow: auto;  
 43 }  
 44 @-webkit-keyframes zoom{  
 45     from {-webkit-transform: scale(0)}  
 46     to {-webkit-transform: scale(1)}  
 47 }  
 48 @keyframes zoom{  
 49     from {transform: scale(0)}  
 50     to {transform: scale(1)}  
 51 }  
 52 .modal-header{  
 53     box-sizing:border-box;  
 54     border-bottom:1px solid #ccc;  
 55     display: flex;  
 56     justify-content: space-between;  
 57     align-items: center;  
 58 }  
 59 .close{  
 60     color: #b7b7b7;  
 61     font-size: 30px;  
 62     font-weight: bold;  
 63     margin-right: 20px;  
 64     transition: all 0.3s;  
 65 }  
 66 .close:hover, .close:focus{  
 67     color: #95b4ed;  
 68     text-decoration: none;  
 69     cursor: pointer;  
 70 }  
 71 .modal-body{  
 72     padding: 10px;  
 73     font-size: 16px;  
 74     box-sizing:border-box;  
 75 }  
 76 .modal-footer{  
 77     box-sizing:border-box;  
 78     border-top:1px solid #ccc;  
 79     display: flex;  
 80     padding: 15px;  
 81     justify-content: flex-end;  
 82     align-items: center;  
 83 }  
 84 .modal-footer button{  
 85     width: 60px;  
 86     height: 35px;  
 87     padding: 5px;  
 88     box-sizing: border-box;  
 89     margin-right: 10px;  
 90     font-size: 16px;  
 91     color: white;  
 92     border-radius: 5px;  
 93     background-color: cornflowerblue;  
 94 }  
 95 .modal-footer button:hover, .modal-footer button:focus{  
 96     background-color: #95b4ed;  
 97     cursor: pointer;  
 98 }  
 99 @media only screen and (max-width: 700px){  
100     .modal-content {  
101         width: 80%;  
102     }  
103 }  

模态框model默认不显示(display:none),且固定占满整个屏幕,覆盖其它内容(z-index),蒙层背景颜色为黑色半透明;

模态框的显示通过animateion动画逐渐放大显示出来;

模态框响应式布局,首先设置整个模态框为flex容器,flex项目为headerbodyfooter,且主轴为纵向。header和footer模块又可用flex布局,flex容器为header和footer,flex项目为内部元素,主轴为水平方向。

多媒体media查询实现当屏幕小到一定程度时,模态框大小比例可适当放大。

三、模态框JavaScript代码

代码语言:javascript
复制
 1 <script>  
 2     var btn = document.getElementById('showModel');  
 3     var close = document.getElementsByClassName('close')[0];  
 4     var cancel = document.getElementById('cancel');  
 5     var modal = document.getElementById('modal');  
 6     btn.addEventListener('click', function(){  
 7         modal.style.display = "block";  
 8     });  
 9     close.addEventListener('click', function(){  
10         modal.style.display = "none";  
11     });  
12     cancel.addEventListener('click', function(){  
13         modal.style.display = "none";  
14     });  
15 </script>  

给按钮添加事件监听,当点击显示模态框按钮时,设置modal的display属性为block,当点击取消或关闭模态框按钮时,设置modal的display属性为none。

四、效果展示 首先点击显示模态框,全屏最大显示:

横向缩小浏览器窗口宽度时,模态框横向实现响应式显示。

纵向缩小浏览器窗口高度时,模态框纵向实现响应式显示。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档