js实现简单模态框实例

(编辑：jimmy 日期: 2024/11/19 浏览：2)

模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互。

类似于这样。

首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现。值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动。实现这样框图就是加了两个盒子

第一个盒子实现背景：

将整个页面覆盖（透明色）

第二个盒子实现交互框。

小编这边来实现一个最简单的交互框（代码量可能相对多了一点，主要是因为样式多了一点整体结构还是非常简单的）

代码如下：

模拟框最关键的一步就是在对他们样式写好时最先以display:none;让他们不显示，然后以js触动改变display再讲他们显现出来。

<title>点击显示弹框</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #btn{
      text-align: center;
    }
    .a1{
      display: block;
      text-decoration: none; //创建一个超链接点击可现实弹框
    }
    #back{
       width: 100%;
       height: 100%;
       background: rgba(0,0,0,.5);  //设置黑色的透明色
       position: fixed;       //在页面中绝对定位
       top: 0;
       left: 0;
       z-index: 999;        //因为要覆盖全网页所以设置一个比较高的权重
       display: none;
    }
    #login{
      display: none;
      width: 400px;
      height: 250px;
      background-color: #fff;
      position: fixed;
      top:50%;
      left:50%;
      margin:-125px 0 0 -200px;
      z-index: 1000;
    } //弹框用样也是像背景一样实现
    #close_all{
      position: absolute;
      top:10px;
      right:10px;
      width:15px;
      height:15px;
      font-size:15px;
      cursor: pointer; //该步鼠标悬停时变小手
    } //给×符号定位在右上角
  </style>
  <script type="text/javascript">
    window.onload=function () {
      var btn=document.getElementById("btn");
      var back=document.getElementById("back");
      var login=document.getElementById("login");
      var close_all=document.getElementById("close_all");
      btn.onclick=function () {
        back.style.display="block";
        login.style.display="block";
      }
      close_all.onclick=function () {
        back.style.display="none";
        login.style.display="none";
      }
    }
  </script>
</head>
<body>
<div id="btn">
  <a href="javascript:;" rel="external nofollow" class="a1">点击我登录</a>
</div>
<div id="back"></div>
<div id="login">
  <span id="close_all">×</span>
</div>
 
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：Javascript实现秒表倒计时功能

下一篇：js实现搜索栏效果