模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互。
类似于这样。
首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现。值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动。实现这样框图就是加了两个盒子
第一个盒子实现背景：
将整个页面覆盖（透明色）
第二个盒子实现交互框。
小编这边来实现一个最简单的交互框（代码量可能相对多了一点，主要是因为样式多了一点整体结构还是非常简单的）
代码如下：
模拟框最关键的一步就是在对他们样式写好时最先以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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- AngularJS模态框模板ngDialog的使用详解
- 原生js实现简单的模态框示例
- [js高手之路]单例模式实现模态框的示例
- Bootstrap与Angularjs的模态框实例代码
- Vue.js弹出模态框组件开发的示例代码
- AngularJS中使用ngModal模态框实例
- angularJS模态框$modal实例代码
- JS实现图片点击后出现模态框效果
- bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
- js实现类bootstrap模态框动画
- AngularJs 弹出模态框（model）
- js利用事件的阻止冒泡实现点击空白模态框的隐藏
