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

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

一、模态框HTML代码

 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代码

  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代码

 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。

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杂七杂八

盒子模型

盒模型(box model)是CSS中的一个重要概念,它是元素大小的呈现方式。需要记住的是:"every element in web design is a ...

2909
来自专栏用户画像

图片 垂直居中

812
来自专栏IMWeb前端团队

Canvas实现progress效果

据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件   Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用j...

2287
来自专栏JavaEdge

CSS 全解析实战(三)-CSS 基础1 选择器(1)背景非布局样式(边框)非布局样式(滚动)非布局样式(文本折行)非布局样式(装饰性属性)hack和案例(1)hack和案例(2)面试题

561
来自专栏向治洪

css3动画从入门到精通

什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明...

3906
来自专栏jiajia_deng

Qt 用画笔对图片实现马赛克效果

最近接了一个用 Qt 做跨平台截图工具的任务,主要功能有截图、绘制图案、马赛克、毛玻璃、文字能效果,其中马赛克功能时参考网上的文献并自己研究制作出来的,这里特意...

2031
来自专栏分享达人秀

两分钟掌握FrameLayout帧布局

前面学习了线性布局、相对布局、表格布局,那么本期来学习第四种布局——FrameLayout帧布局。 一、认识FrameLayout 帧布局是An...

2229
来自专栏cnblogs

深入理解及应用Position

position俗称定位,主要取值及作用如下: static 默认值。没有定位,出现在正常文档流中 absolute 绝对定位,相...

2026
来自专栏腾讯IVWEB团队的专栏

Canvas 实现 progress 效果

分享下一个简单的Canvas插件 ,Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形。

5480
来自专栏Android小菜鸡

自定义View学习之路(五)————彩虹环

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的彩虹环为例。开始系统的学习View的绘制。 彩虹环需求:

942

扫码关注云+社区