js实现简单模态框实例
网络编程 2021-07-04 16:47www.168986.cn编程入门
这篇文章主要为大家详细介绍了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; //在页面中绝对定位 : 0; left: 0; z-index: 999; //因为要覆盖全网页所以设置一个比较高的权重 display: none; } #login{ display: none; width: 400px; height: 250px; background-color: #fff; position: fixed; :50%; left:50%; margin:-125px 0 0 -200px; z-index: 1000; } //弹框用样也是像背景一样实现 #close_all{ position: absolute; :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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:Javascript实现秒表倒计时功能
下一篇:js实现搜索栏效果
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程