原生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父级以及同级元素查找介绍
Sep 04 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
layui分页效果实现代码
May 19 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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
PHP5 安装方法
2006/10/09 PHP
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
python根据路径导入模块的方法
2014/09/30 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
广告学毕业生求职信
2014/01/30 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
法定授权委托证明书
2014/09/27 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
催款律师函范文
2015/05/27 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技