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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Javascript 中的 call 和 apply使用介绍
JavaScript 中通过call或者apply用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象2012-02-02
tab相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tab的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
Base64是一种用64个字符来表示任意二进制数据的方法，这篇文章主要为大家介绍了如何实现将图片转为base64格式，感兴趣的小伙伴可以学习一下2023-07-07
在基于网页的打印输出或报表中，经常会牵扯到金额的大写，每次都打上去很麻烦，所以想法用一个JavaScript客户端脚本来实现自动转换，只需在需要显示大写金额的时候调用该JS函数，下面我们就来汇总下吧2015-10-10
这篇文章主要介绍了JS实现多张图片预览同步上传功能的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了BootStrap学习笔记之nav导航栏和面包屑导航的相关资料,需要的朋友可以参考下2017-01-01
Javascript (ECMA Script)是一种弱类型的语言。这并不意味着它没有数据类型，只是变量或者Javascript对象属性不需要一个特定类型的值分配给它或者它始终使用相同的值。2010-10-10
这篇文章主要介绍了bootstrap table小案例，教大家如何使用表格组件bootstrap table2016-10-10
这篇文章主要介绍了Js数组扁平化实现方法代码总汇,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要给大家介绍了关于JS中6个对象数组去重的方法,javascript数组去重是一个比较常见的需求,解决方法也有很多种,文中每种解决方法都给出了示例代码,需要的朋友可以参考下2023-07-07
最新评论