弹出层效果_学习笔记

首页免费课弹出层效果笔记

弹出层效果

最热最新

qq_小艺轩_03563899

document.creanteElement 创建节点 doucument.body.appendChild()放置节点

查看全部

0 采集收起来源：JS实现遮罩层
2017-02-24
qq_小艺轩_03563899

document.documentElement.scrollHeight 获取当前网页的实际高度 .scrollwidth 获取当前网页的实际宽度

查看全部

0 采集收起来源：JS实现遮罩层
2017-02-24
pluto_lxh 02:29

弹出层工作原理：创建或者删除两个节点（一个是遮罩层，一个是登录层）

查看全部

0 采集收起来源：效果简介
2017-02-19
慕粉1039525088

window.onload的意义是文档页面加载完获取节点，有些节点在文档没加载完获取不到，会出现报错 var sHeight=document.documentElement.scrollHeight;获取页面高度 var sWidth=document.documentElement.scrollWidth;获取页面宽度 var oMask=document.createElement("div");创建节点 document.body.appendChild(oMask);在页面上追加节点（显示） window.onload=function(){ var oBtn=document.getElementById("btnLogin"); //获取变量 //获取页面的高度和宽度 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; //重新创建一个节点 var oMask=document.createElement("div"); oMask.id="mask"; //设置高度与获取到的高度和宽度一样的值 oMask.style.height=sHeight+"px"; oMask.style.width=sWidth+"px"; // 追截节点类似插入文档 document.body.appendChild(oMask); }

查看全部

0 采集收起来源：JS实现登录框
2018-03-22
慕粉1039525088

1、弹出层效果要创建一个弹出层，可以现在CSS样式表里把这个弹出层的#id和样式设好，然后在JS里创建这个弹出层 2、要实现点击登陆框以外的区域也可以关闭登陆框可以设一个可视区大小的遮罩层oMask，opacity设为0 oMask.onclick=oClose.onclick=function(){ }

查看全部

0 采集收起来源：JS实现遮罩层
2017-01-27
xcss

登录框相对窗口垂直水平居中不用js控制,用css就能实现，如登录框 .login-box{ width:500px; height:600px; position:fixed; top:50%; left:50%; margin-top:-300px;(自身高度的一半) margin-left:-250px;(自身宽度的一半)}

查看全部

0 采集收起来源：静态页面实现
2017-01-21
狼人1

父子关系

查看全部

0 采集收起来源：编程练习
2016-12-16
Abby诺亚

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>慕课网-弹出层</title> <style type="text/css"> #close{ background:url(http://img1.sycdn.imooc.com//532c272100018d1600300030.jpg) no-repeat; width:30px; height:30px; cursor:pointer; position:absolute; right:5px; top:15px; text-indent:-999em; } #mask{ background-color:#ccc; opacity:0.5; filter: alpha(opacity=50); position:absolute; left:0; top:0; z-index:1000; } #login{ position:fixed; z-index:1001; } .loginCon{

查看全部

0 采集收起来源：编程挑战
2018-03-22
Abby诺亚

<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>慕课网-弹出层</title> <style type="text/css"> #close{ background:url(http://img1.sycdn.imooc.com//532c272100018d1600300030.jpg) no-repeat; width:30px; height:30px; cursor:pointer; position:absolute; right:5px; top:15px; text-indent:-999em; } #login{ position:fixed; z-index:1001; } .loginCon{ position:relative; width:670px; height:380px; background:url(http://img1.sycdn.imooc.com//532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat; } </style> <link type="text/css" rel="stylesheet" href="style/main.css" /> <script> function openNew(){ //获取页面的高度和宽度 var sWidth=document.documentElement.scrollWidth; var sHeight= document.documentElement.scrollHeight ; //获取页面的高度 //获取页面的可视区域高度和宽度 var wHeight=document.documentElement.clientHeight ; // 获取页面可视区域的高度

查看全部

0 采集收起来源：编程练习
2018-03-22
慕粉3965217 02:40

获取页面的高度和宽度，不是可视窗口的高度和宽度额

查看全部

0 采集收起来源：JS实现遮罩层
2016-11-21
Coagl

静止定位：position:fixed;

查看全部

0 采集收起来源：静态页面实现
2016-11-14
Coagl

z-index:1000px;给一个大的层级让悬浮层处在最上以便于遮住所有元素。

查看全部

0 采集收起来源：静态页面实现
2016-11-14
Coagl

透明度：opacity:0.75; IE兼容 filter:alphal(opacity=75);

查看全部

0 采集收起来源：静态页面实现
2016-11-14
Coagl

绝对定位：position:absolute;left:0;top:0;

查看全部

0 采集收起来源：静态页面实现
2016-11-14
小样儿吧你

透明度的兼容：opacity：0-1之间的数字；ie兼容用滤镜filter：alpha（opacity：1——100之间的整数）

查看全部

0 采集收起来源：静态页面实现
2016-11-14