js实现简单模态框实例
更新时间：2022年07月04日 09:58:46 作者：心所向在脚下
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在每年的10月24日,我们都会庆祝程序员节,这是一个向所有辛勤工作、创造出无数令人惊叹应用和系统的程序员们致敬的日子,为了纪念这个特殊的日子,我们将通过编写一个简单的1024小游戏来向所有程序员们表示敬意,本文将详细解释如何使用JavaScript编写这个小游戏2023-10-10
春节将至，相信大家跟小编一样很激动呀。为了迎接虎年春节到来，小编为大家准备了一个虎年春节倒计时，仅20行代码用js就实现啦。感兴趣的可以动手试一试2022-01-01
js中的原型与原型链应该是老生常谈的话题了，在前端面试中基本都是必问的一个问题，但是很多人还是稀里糊涂的，只知道其表层含义。本文将带大家深入了解JavaScript中的原型与原型链，感兴趣的可以学习一下2022-10-10
下面小编就为大家带来一篇浅谈JS原生Ajax,GET和POST。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本文通过代码实例给大家讲解js读取xml文件及jq读取xml文件的方法，对本文感兴趣的朋友一起学习吧2015-12-12
属性描述符是 ECMAScript 5 新增的语法,它其实就是一个内部对象,用来描述对象的属性的特性,下面小编就来为大家详细介绍一下js中对象属性描述符的使用,需要的可以参考下2023-11-11
通过获取浏览器语言版本，来相对的加载easyui语言包就是动态加载JS文件，下面有个不错的实例，大家可以看看2014-10-10
在数据可视化大屏中,滚动表格是一种常见的需求,本文介绍了如何利用scrollTop属性和定时器来制作滚动效果,不依赖于任何插件,可以实现自定义的滚动表格,文中通过代码介绍是非常详细,需要的朋友可以参考下2024-09-09
TypeScript的装饰器为我们提供了一种强大的工具,可以在运行时改变类的行为,通过理解装饰器的工作原理,我们可以创造更加强大、灵活且易于维护的应用,这篇文章主要介绍了TypeScript装饰器与反射元数据,需要的朋友可以参考下2023-09-09
javascript中call,apply,callee,caller用法实例分析
这篇文章主要介绍了javascript中call,apply,callee,caller用法,结合实例形式分析了javascript中call,apply,callee,caller功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-07-07
最新评论