原生js实现简单的模态框

html部分:

<img src="images/8.jpg" >
 <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; 
}

效果

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

时间: 2024-10-16 09:50:21

原生js实现简单的模态框的相关文章

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

原生Js封装的弹出框

<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>原生Js封装的弹出框-弹出窗口-页面居中-多状态可选</title> <style type="text/css"&

原生JS实现简单富文本编辑器2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

js 实例2 实现模态框弹出;

简单实现功能如上: 1,单击按钮,模态框弹出. 2.单击红色的叉号关闭复选框. 思路:先将没有隐藏的属性写好,然后通过js实现新建各种标签以及属性. 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; ma

原生js实现简单的下拉刷新功能

前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一.创建简单的html页面: 假设代码里的float-box是一个主页面. 二.封装下拉刷新的功能模块: (1)首先创建一个Slide构造函数,用来初始化属性与函数. function Slide(dom){ this.start_y=null;//手指滑动屏幕的初始位置 this.end_y=null

原生js实现拖拽弹框的效果

研究了一上午,模仿了拖拽弹框的效果,小有成就 <script type="text/javascript"> function getByClass(classname,parent){ var par=parent||document, eles=par.getElementsByTagName("*"), needArr=[]; for(var i=0;i<eles.length;i++){ if(eles[i].className==clas

原生js实现三级复选框

工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>三级复选框</title> </head> <body&

仿智能社官网:原生JS实现简单又酷炫的3D立方体时钟

先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默认你已经做好了6个立方体,直接上JS代码: 页面进来的时候,先给6个立方体赋值上现在的时间,由于立方体比较小,左右2个面看不清且影响效果,这里左右2个面就不赋time了: //获取元素 var oul = document.querySelectorAll("ul"); var back

【原生JS】简单取随机数

因为js本身取随机数仅能取 0 到 1之间的数,所以..... 取 1 - 10之间的随机数. function getSJS(x,y,z){ var int = 0; while(int >= x || int <= y || int === 0){ int = Math.random(); int = (int.toFixed(z) * x).toFixed(0); } return int; } getSJS(10,1,3) 所以.... (function(){ function ge