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 EasyUI 使用介绍
Apr 01 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP echo()函数讲解
2019/02/15 PHP
js右键菜单效果代码
2007/07/21 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
flask session组件的使用示例
2018/12/25 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
python如何绘制疫情图
2020/09/16 Python
python里反向传播算法详解
2020/11/22 Python
python中温度单位转换的实例方法
2020/12/27 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
初中生个人学习的自我评价
2013/12/04 职场文书
大学生英语演讲稿
2014/04/24 职场文书
我的祖国演讲稿
2014/05/04 职场文书
大学班级文化建设方案
2014/05/06 职场文书
四风问题对照检查材料
2014/09/22 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
vue实现在data里引入相对路径
2022/06/05 Vue.js