Js实例——模态框弹出层
1.描述
百度登录就是一个模态框弹出层。思路分析：先将灰色大背景和登陆盒子设为不可见，利用JS将其动态加载可见。
2、代码
<!DOCTYPE html>
<html>
<head>
<title>模态框弹出层.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style>
*{margin:0;padding:0;}
body{
width:100%;
height:10000000px;
}
#mask{
display:none;
background:rgba(0,0,0,0.3);
width:100%;
height:100%;
position:fixed;//利用固定定位的好处：页面还可以上下翻动，但是始终处于灰色背景下
}
#login{
display:none;
background:white;
width:400px;
height:250px;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-125px;
}
#login #close_login{
position:absolute;
left:350px;
top:10px;
font-size:20px;
width:20px;
height:20px;
background:skyblue;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
var mask=document.getElementById("mask");
var login=document.getElementById("login");
btn.onclick=function(){
mask.style.display="block";
login.style.display="block";
};
var close_login=document.getElementById("close_login");
close_login.onclick=function(){
mask.style.display="none";
login.style.display="none";
};
};
</script>
</head> <body>
<div id="mask"></div>
<div id="login">
<span id="close_login">×</span>
</div>
<a href="javascript:;" id="btn">请登录</a>
</body>
</html>
Js实例——模态框弹出层的更多相关文章
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
- bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...
- Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出，并进行前段验证
1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { ...
- 原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
- bootstrap删除模态框弹出并询问是否删除【通用删除模态框】
普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除. 效果: 点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除. 过程 ...
- 关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
- js,ajax,layer笔记(弹出层,在弹出一个弹框)
整体认识: 因为作用域的问题,js 在页面初次加载时已近加载好了,所以要有第二次弹窗的效果,必须得在第一次成功之后再次让他加载js 代码: /*shaun*/showdetailsPag: funct ...
- js 点击 隐藏弹出层
document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...
- bootstrap中的模态框（modal，弹出层）
默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...
随机推荐
- asp.net textbox控件readonly为true时，后台取值的问题
如题,在后台通过textbox.Text方式取值为空,不论你默认值是否是空,如想要获得,需通过request.Form[""]的方式.
- NET:交换机的背板带宽，交换容量，包转发率区别
交换机的背板带宽,交换容量,包转发率区别 背板带宽指的是背板整个的交换容量,交换容量指cpu的交换容量,包转发指的是三层转发的容量 一.背板带宽 1.交换机背板带宽含义 交换机的背板带宽也叫背板容量, ...
- Industry Engineer
IE:有两种,一种是系统方面的,对全厂的物流设计,依据产量做人力估算,机台,设备,手工具的估算等,一种是配合产能提升做制造的改善,以及SOP(Standard Operation Procedure: ...
- Puppent 基本使用方法
简单的文件配置 master端 vim /etc/puppet/manifests/site.pp ###########################内容如下 node default{ file ...
- RS232 DB9 公头 母头 串口引脚定义
转自:http://hi.baidu.com/zhy_myspace/item/ad1ab0f112a4da1ad7ff8cf9 DB9 公头 母头 串口引脚定义 1．RS-232端(DB9母头/孔型 ...
- iOS生成一个32位的UUID
- (NSString *)uuidString { CFUUIDRef uuid_ref = CFUUIDCreate(NULL); CFStringRef uuid_string_ref= CFU ...
- jsp环境搭建(Windows)
1.软件准备 JDK 最新版jdk-8u45-windows-x64.exe tomcat 最新版32-bit/64-bit Windows Service Installer Eclipse IDE ...
- new thoughts over function pointers
Previous works do not relate to function pointers, but reading some documents reading and learning S ...
- 最小点集覆盖=最大匹配<二分图>/证明
来源 最小点集覆盖==最大匹配. 首先,最小点集覆盖一定>=最大匹配,因为假设最大匹配为n,那么我们就得到了n条互不相邻的边,光覆盖这些边就要用到n个点. 现在我们来思考为什么最小点击覆盖一定& ...
- 单元测试、自动化测试、接口测试过程中的Excel数据驱动(java实现)
import java.io.FileInputStream;import java.io.InputStream;import java.util.HashMap;import java.util. ...