原生js实现简单的模态框示例


Posted in Javascript onSeptember 08, 2017

html部分:

<img src="images/8.jpg" alt="">
 <button class="btn" id="showMax">显示大图</button> 
 <div id="modalBox" class="modalBox">
 <div class="modalBox-matter">
  <header class="modalBox-header">
   <span class="mtclose">×</span>
  </header> 
  <div class="modalBox-body">


<img src="images/8-1.jpg">


</div>
 </div>
</div>

js部分:

var btn = document.getElementById('showMax'); 
 var mtclose = document.getElementsByClassName('mtclose')[0];
 var modalBox = document.getElementById('modalBox'); 
 btn.addEventListener('click', function(){ 
  modalBox.style.display = "block"; 
 }); 
 mtclose.addEventListener('click', function(){ 
  modalBox.style.display = "none"; 
 });

css部分:

.btn{ 
 width: 100px; 
 height: 35px; 
 border-radius: 5px; 
 font-size: 16px; 
 color: #F97B39;

 position: absolute;
 top: 130px;
 left: 160px;
 opacity: 0.2;
 cursor: pointer; /*鼠标小手*/
} 

.btn:hover, .btn:focus{ /*focus 取得焦点状态*/
 background-color: #8AA7F9;
 opacity: 0.5;
 color: #FFFFFF;
} 
.modalBox{ 
 display: none; 
 width: 100%; 
 height: 100%; 
 position: fixed; 
 left: 0; 
 top: 0; 
 z-index: 1000; 
 background-color: rgba(0,0,0,0.5);
}

.modalBox-matter{ 
 display: flex;  /*/*弹性布局*/
 flex-flow: column nowrap; 
 justify-content: space-between; 

/*两端对齐*/
 width: 50%; 
 height: 80%;
 margin: 30px auto 100px; 
 border-radius:10px;
 -webkit-animation: zoom 0.6s; 
 animation: zoom 0.6s; 
 resize: both; 
 overflow: auto; 
}

@keyframes zoom{ 
 from {transform: scale(0)} 
 to {transform: scale(1)} 
}

.modalBox-header{


margin-left: 617px; 
}

.mtclose{
 color: #602E2A; 
 font-size: 3em; 
 font-weight: bold; 
 transition: all 0.3s;
 /*z-index: 1010; */
 } 
 .mtclose:hover, .mtclose:focus{ 
 color: #602E2A; 
 cursor: pointer; 
}

.modalBox-body{ 
 padding: 10px; 
 font-size: 16px; 
}

效果

原生js实现简单的模态框示例

原生js实现简单的模态框示例

因为正在进行的一个项目中,需要一个模态框,所以花时间在网上自学的,相对来说比较简单,可以自行修改内容。。。

以上这篇原生js实现简单的模态框示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
jquery 使用点滴函数代码
May 20 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
javascript 面向对象实战思想分享
Sep 07 #Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 #Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 #Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 #Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 #Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 #Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 #Javascript
You might like
PHP操作xml代码
2010/06/17 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
layui表格设计以及数据初始化详解
2019/10/26 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python translator使用实例
2008/09/06 Python
深入Python函数编程的一些特性
2015/04/13 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
详解python的super()的作用和原理
2020/10/29 Python
python中altair可视化库实例用法
2021/01/26 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
初中英语教学反思
2014/01/25 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis