WEB全栈笔记之弹出层
来源：互联网 发布：赚钱的软件 编辑：程序博客网 时间：2024/05/21 12:46
<!DOCTYPE ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出层</title><style type="text/css">#close{ background:url(234021dt3rvxzt1lrl5phz.png) no-repeat ; width:30px; height:30px; cursor:pointer; position:absolute; right:5px; top:15px; text-indent:100em;display: block;}#mask{ background-color:#ccc;opacity:0.5;/* 这是设置div的不透明级别 */filter: alpha(opacity=50); /* 这是设置div的不透明级别 IE专用 */position:absolute; left:0;top:0;z-index:1000;width: 100%;display: none;}#login{ position:fixed;z-index:1001;left: 50%;top: 50%;margin-top: -190px;margin-left: -335px;display: none;}.loginCon{ /* position:relative; width:670px;height:380px;background:url(234030lc9b0oc3za0qhogg.png) #2A2C2E center center no-repeat; background-size:100%; */display: block;}.login-btn { font-family: 微软雅黑; width: 100px; height: 40px; background: rgb(201, 57, 74); text-align: center; display: block; line-height: 40px; font-size: 14px; opacity: 0.9; text-decoration: none; color: rgb(255, 255, 255); cursor: pointer;}</style><script>window.onload=function(){var oMask=document.getElementById('mask')var oClose=document.getElementById("close");var oBtn=document.getElementById("btnLogin");var oLogin=document.getElementById('login')var oHeight=document.body.scrollHeightoMask.style.height=oHeight+'px'console.log(oHeight)oBtn.onclick=function(){oMask.style.display='block'oLogin.style.display='block'}oMask.onclick=oClose.onclick=function(){oMask.style.display='none'oLogin.style.display='none'}}</script></head><body><div id="header"> <div class="container" id="nav"> <div id="login-area"> <button id="btnLogin" hidefocus="true" class="login-btn">登录</button> </div> </div></div><div id="mask"></div><div id="login"><div class="loginCon" style="border:1px solid #f00; background-size:100%;"><form action="" method="post" class="STYLE-NAME"><h1>Contact Form<span>Please fill all the texts in the fields.</span></h1><label><span>Your Name :</span><input id="name" type="text" name="name" placeholder="Your Full Name" /></label><br><label><span>Your Email : </span><input id="email" type="email" name="email" placeholder="Valid Email Address" /></label><br><label><span>Message : </span><textarea id="message" name="message" placeholder="Your Message to Us"></textarea></label><br><label><span>Subject : </span><select name="selection"><option value="Job Inquiry">Job Inquiry</option><option value="General Question">General Question</option></select></label><label><span> </span><input type="button" class="button" value="Send" /></label></form><div id="close"></div></div></div></body></html>弹出层相当于将原来的display元素由none设置为block
再说说这个页面的思路，
首先做一个button按钮设置逻辑事件为按下button进行弹出层行为
<div id="mask"></div>var oMask=document.getElementById('mask')，是弹出层1，作用是将背景设置为灰色<div id="login">为弹出层2，通过设置z-index将弹出层2放在弹出层1上面刚开始将弹出层2和弹出层1的display设置为none此元素不会被显示，然后通过点击onclick事件将两个弹出层显示出来，通过设置display:block(此元素将显示为块级元素，此元素前后会带有换行符。)显示出来以后再设置事件点击弹出层1未被弹出层2覆盖的部分以及id为close的元素将会将弹出层1和弹出层2的display属性设置为none这里有一点需要注意如何使弹出层1覆盖整个页面首先div属性是个块级元素它的width和浏览器当前的width相同，然后通过document.body.scrollHeight（scrollHeight指页面的总高度，当前一屏显示高度再加上纵向滚动条滚动到底的高度）将height=整个页面长度，使这个id=mask的div占满整个页面。以上是我对于弹出层的理解如果要弹出一个静态的提示信息可以参照<!DOCTYPE ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出层</title><style type="text/css">#close{ background:url(234021dt3rvxzt1lrl5phz.png) no-repeat ; width:30px; height:30px; cursor:pointer; position:absolute; right:5px; top:15px; text-indent:100em;display: block;}#mask{ background-color:#ccc;opacity:0.5;/* 这是设置div的不透明级别 */filter: alpha(opacity=50); /* 这是设置div的不透明级别 IE专用 */position:absolute; left:0;top:0;z-index:1000;width: 100%;display: none;}#login{ position:fixed;z-index:1001;left: 50%;top: 50%;margin-top: -190px;margin-left: -335px;display: none;}.loginCon{ /* position:relative; width:670px;height:380px;background:url(234030lc9b0oc3za0qhogg.png) #2A2C2E center center no-repeat; background-size:100%; */display: block;}.login-btn { font-family: 微软雅黑; width: 100px; height: 40px; background: rgb(201, 57, 74); text-align: center; display: block; line-height: 40px; font-size: 14px; opacity: 0.9; text-decoration: none; color: rgb(255, 255, 255); cursor: pointer;}</style><script>window.onload=function(){var oMask=document.getElementById('mask')var oClose=document.getElementById("close");var oBtn=document.getElementById("btnLogin");var oLogin=document.getElementById('login')var oHeight=document.body.scrollHeightoMask.style.height=oHeight+'px'console.log(oHeight)oBtn.onclick=function(){oMask.style.display='block'oLogin.style.display='block'}oMask.onclick=oClose.onclick=function(){oMask.style.display='none'oLogin.style.display='none'}}</script></head><body><div id="header"> <div class="container" id="nav"> <div id="login-area"> <button id="btnLogin" hidefocus="true" class="login-btn">登录</button> </div> </div></div><div id="mask"></div><div id="login"><div class="loginCon" style="border:1px solid #f00; background-size:100%;"> <iframe src="a.html" height="100px" width="100px" frameborder="0"></iframe><div id="close"></div></div></div></body></html>a.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test</title></head><body><p>test</p></body></html>1 0
- WEB全栈笔记之弹出层
- Web全栈笔记之ES6
- Web全栈笔记之Angular基础
- CSS学习笔记之弹出层
- 菜鸟笔记之---js div 弹出层
- web弹出层组件之js组件layer
- Web全栈笔记之微信公众平台开发
- Web全栈笔记之node.js第一章
- Web全栈笔记之Nojs.js第二章
- Web全栈笔记之全选反向(新手必备)
- Web全栈笔记之DOM编程艺术
- Web全栈笔记之生成随机验证码
- web全栈笔记之DIV+CSS布局
- JQuery 学习笔记之：美妙的标题提示 弹出层
- DIV 弹出层（笔记）
- js弹出窗口之弹出层
- OA项目之弹出层中再弹出层
- 非常好的web弹出层框架 -- layer
- 缺失值的插补
- 关系型数据库和非关系型数据库的特性以及各自的优缺点
- LeetCode120 Triangle
- Java 实例
- 【网易笔试】小易最近在数学课上学习到了集合的概念
- WEB全栈笔记之弹出层
- 十个最小的连续自然数，并且这十个数都为合数（非素数）
- JEECG 避免表单重复提交
- Redis的安装和使用之一 -----Redis相关运用
- win10怎么彻底卸载oracle11g
- 指针
- linux exercise16
- 指定Uri文件图片进行压缩,如何避开OOM?
- linux awk一个小小的实例
