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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍简单实现js浮动框，包括了简单实现js浮动框的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js浮动框的实现代码，供大家参考，具体内容如下 一.在需要加入浮动框的页面中加入如下css代码： 二.js代码(注意：该代码要添加整个页面最后，目的是页面加载完成时加载它) 三.html代码(注意：该代码要放置到body的最后) 以上就是本文的全部内容，希望对大家的学习有所帮助，
-
本文向大家介绍js实现类bootstrap模态框动画，包括了js实现类bootstrap模态框动画的使用技巧和注意事项，需要的朋友参考一下 在pc端开发，模态框是一个很常用的插件，之前一直用的第三方插件，比如bootstrap，jQuery的模态框插件，最近还用了elementUI的。但是会发现其实动画效果都差不多，那么如何去实现这样一个动画效果呢？ 模态框的构成 常见的模态框的结构我们很容易就
-
本文向大家介绍JavaScript实现模态对话框实例，包括了JavaScript实现模态对话框实例的使用技巧和注意事项，需要的朋友参考一下 这篇文章主要介绍了JavaScript实现模态对话框实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 初始页面如下: 点击"click"后显示如下: 点击"cancel"后再回到初始画面. 这段代码模拟了模
-
本文向大家介绍js实现简单锁屏功能实例，包括了js实现简单锁屏功能实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现简单锁屏功能的方法。分享给大家供大家参考。具体实现方法如下： 如果大家不知道什么是锁屏，可以去163信箱看一看，用途是你要离开屏幕一段时间时可以暂时锁住屏幕保留工作空间。带回来只要重新输入密码验证即可恢复到原先的工作空间。 一般都是通过在页面上增加不透明遮罩层实现锁
-
本文向大家介绍js结合json实现ajax简单实例，包括了js结合json实现ajax简单实例的使用技巧和注意事项，需要的朋友参考一下 前期准备 1、安装wampserver或者其他相似软件来搭建本地集成安装环境，我安装的是phpstudy 2、html、js、css等文件需要放置在PHPstudy中的WWW目录中，默认运行index页面 3、bootstrap.css 界面截图： phpstud
-
本文向大家介绍js实现简单实用的AJAX完整实例，包括了js实现简单实用的AJAX完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现简单实用的AJAX的方法。分享给大家供大家参考，具体如下： 更多关于ajax相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》及《jquery中Ajax用法总结》 希望本文所述对大家ajax程序设计有所帮助。