相思资源网 Design By www.200059.com
模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互。
类似于这样。
首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现。值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动。实现这样框图就是加了两个盒子
第一个盒子实现背景：
将整个页面覆盖（透明色）
第二个盒子实现交互框。
小编这边来实现一个最简单的交互框（代码量可能相对多了一点，主要是因为样式多了一点整体结构还是非常简单的）
代码如下：
模拟框最关键的一步就是在对他们样式写好时最先以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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,模态框
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无js实现简单模态框实例的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。