原生实现响应式模态框

最新推荐文章于 2019-11-24 20:33:21 发布
最新推荐文章于 2019-11-24 20:33:21 发布
阅读量873 收藏 4
点赞数

原生实现响应式模态框

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

一、模态框HTML代码

[html]  view plain  copy
  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（带关闭按钮）、body和footer。

二、模态框CSS代码

[css]  view plain  copy
  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项目为header、body和footer，且主轴为纵向。header和footer模块又可用flex布局，flex容器为header和footer，flex项目为内部元素，主轴为水平方向。

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

三、模态框JavaScript代码

[javascript]  view plain  copy
  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
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5响应式模态框(模态对话框).zip
05-28
HTML5响应式模态框(模态对话框)，响应式设计，自适应分辨率，兼容PC端和移动端，点击按钮弹出模态框动画效果，有关闭按钮。
原生JS+css3实现bootstrap模态框
08-20
用原生JavaScript和CSS3共同实现bootstrap模态框效果。
Iframe中的模态框的页面自适应
技术的海洋，知识的海洋。遨游~~
04-19 2335
场景描述： Web页面使用Iframe作为主要的显示区，当在Iframe页面设置模态弹出框时，需要对其显示的宽高进行动态调整。 大致思路是： 获取到遮罩层的宽、高 获取模态框的宽高 根据遮罩层和模态框的宽高比较，动态调整模态框的宽高 这里默认大家可以布局出这样的模态框，也就是涉及到CSS知识的使用。
原生js => 实现模态框
weixin_34199335的博客
12-21 296
先看实现的的效果 具体代码如下所示 .html &lt;!-- 模态框 --&gt; &lt;section class="modal"&gt; &lt;div class="modal-info center-self-xy mYBounceInDown"&gt; &lt;div class="modal-t"&gt; &lt;p class="cen
materialize基础---组件
kikpinの手抄小册子
11-24 433
materialize基础---组件轮播 carousel折叠 collapsible弹出消息 toast提示 tooltipped下拉列表 dropdown（留坑中） 轮播 carousel 结构： .carousel.carousel-slider> a.btn.carousel-fixed-item+ carousel-item*n 设置： //初始化 $("#").car...
一套基于 bootstrap 的响应式后台框架
10-15
组件则涵盖了导航栏、按钮、表单、模态框、下拉菜单等多种常见的网页元素，使得开发者可以快速地搭建用户界面。JavaScript 插件则为这些组件添加了交互性，如轮播图、模态对话框、折叠内容等。 H+ 主题UI框架 4.0 ...
移动端响应式框架
08-09
4. **Bootstrap**: Bootstrap是最流行的前端开发框架之一，它提供了一套完整的响应式组件（如导航栏、按钮、表单、模态框等），并预设了良好的响应式布局。开发者可以快速构建响应式网站，同时，Bootstrap的自定义性...
bootstrap weebox 支持ajax的模态弹出框
08-31
Bootstrap原生模态框虽然易于使用，但不支持在模态框内再弹出新的模态框，对于需要复杂交互的场景来说显得局限。而Weebox则解决了这个问题，提供了更灵活的弹出框解决方案。另外，原版Weebox可能存在响应式问题，...
layer.rar 使用js 闭包封装的原生提示模态框
08-23
总结来说，“layer.rar”提供的是一种使用JavaScript闭包封装的跨平台提示模态框解决方案，它结合了HTML和CSS的威力，实现了响应式设计，可以在各种设备上提供一致的用户体验。这个工具的使用和实现涉及到了...
XenonAdmin响应式后台管理bootstrap静态模板_bootstrap响应式网站
12-04
XenonAdmin是一款基于Bootstrap框架的响应式后台管理模板，专为构建现代Web应用程序而设计。Bootstrap是一个流行的开源前端框架，它提供了丰富的组件和样式，能够帮助开发者快速创建具有响应式布局的网页，使得页面...
jQuery响应式弹出层控件+图片放大插件支持模态窗口
08-09
jQuery响应式弹出层控件+图片放大插件支持模态窗口，不过经过测试发现，在IE8下有错误，火狐和Chrome下都正常，可能兼容性有待修复。它可以弹出图片放大框、文字框等，并可以关闭弹出框，响应式、模态弹出框插件，比较轻量级。
jQuery超酷响应式自适应模态窗口特效插件
12-12
这是一款效果非常炫酷的jQuery响应式自适应模态窗口特效插件，该模态窗口插件共有5种特效，当点击特定链接后，模态窗口会后逐渐放大、翻转的动画效果，非常的酷。
Nodejs扩展，实现消息弹窗
weixin_34050427的博客
07-28 4093
參考https://github.com/olalonde/node-notify的实现    模块的C++代码 node_gtknotify.cc #include &lt;v8.h&gt; #include &lt;node.h&gt; #include &lt;string&gt; #include &lt;gtkmm-3.0/gtkmm.h&gt; #include ...
小程序自定义modal弹窗封装实现
weixin_34268753的博客
06-14 1680
前言 小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求，自定义势在必行~ 老规矩先上图 点击某个按钮，弹出 modal框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四个文件复制到对应位...
原生js实现简单的模态框
Wang1996332的博客
11-10 740
html部分： <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="...
【整理】CSS3知识点3
Rand Tsui
05-31 769
1、===============================================================CSS3 多列 CSS3 多列属性 本章节我们将学习以下几个 CSS3 的多列属性: column-count          列数 column-gap            列间隙 column-rule-style     列间隔线形状 column
Materialize一款不错的框架（装逼必备，想想一帮渣渣们还在说bootstrap的时候，你用materialize，高端洋气，别人仰望着，同事们鄙视的看着你还能不能愉快的玩耍的时候，那种孤高的感...
weixin_34239592的博客
04-30 497
这个materialize感觉比bootstrap好一点 当然啦中文文档还木有！所以想搞个materialize中文网的可以抢先咯！ materialize是谷歌设计制作的一款框架。 HOHO，出去别人面试都在说bootstrap的时候你说你用的是google的materialize多洋气 浏览器兼容方面 Chrome 35+, Firefox 31+, Safari 7+, IE ...
JS实现图片弹窗
热门推荐
Annn_kk的博客
04-30 1万+
使用JavaScript和CSS实现点击图片缩略图，创建图片弹窗的功能。 需要配置HTML页面，JS代码和CSS代码 HTML代码： <body> <!-- 图片缩略图，点击图片触发点击事件，以触发弹窗，将display：none去除即可显示图片 --> <img id="myImg" src="C:\Users\Administrator\Desk...
响应式前端框架Bootstrap系列（16）模态框（Modal）插件
@黄小泽的个人博客
01-15 2503
模态框是bs框架的插件之一，之所以称为插件，是因为它有这自己的一套API，可以通过API提供的接口实现对模态框的控制。只要 是bs框架插件，都支持以下几个共同的属性： data-toggle属性：表示点击或链接时触发的事件。 data-target属性：表示点击或链接时触发的事件后将要被显示或隐藏的目标元素。 data-dismiss：是bootstrap里自定义的属性，给一个元素data-
使用js原生实现一个搜索框
最新发布
03-28
...请输入搜索内容"> 搜索 ``` JS代码： ```javascript ...上面的代码实现了一个简单的搜索框，当点击搜索按钮时，会获取搜索框中的内容，并输出到控制台。实际使用时，可以根据需要进行搜索操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值