js实现简单模态框实例


Posted in Javascript onNovember 16, 2018

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

js实现简单模态框实例

类似于这样。

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

第一个盒子实现背景:

将整个页面覆盖(透明色)

第二个盒子实现交互框。

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

代码如下:

模拟框最关键的一步就是在对他们样式写好时最先以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 相关文章推荐
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
js实现搜索栏效果
Nov 16 #Javascript
JavaScript实现简单音乐播放器
Apr 17 #Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 #Javascript
微信小程序自定义toast的实现代码
Nov 16 #Javascript
vue实现简单的星级评分组件源码
Nov 16 #Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 #Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 #Javascript
You might like
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
xtree.js 代码
2007/03/13 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JS中的作用域链
2017/03/01 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
综合办公室主任职责
2013/12/16 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
体育专业自荐书
2014/05/29 职场文书
食品安全汇报材料
2014/08/18 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python