javascript弹出层-DEMO001
首先上一张图 看下弹出层的效果
从图中可以看到二部分 一是弹出层 二是遮照层
弹出层:即弹出你要操作的内容
遮照层:遮照住不要操作的内空
实际技术原理主要是 CSS +JS (z-index是核心)
CSS部分主要是 z-index (CSS定义为 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 说白了就是 凹 凸 )
JS则是 weight 和 wdith 的计算，你弹出来层的大小 位置!
下面是代码:
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#LoginWind{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
Dpadding:5px;
z-index:999;
}/*弹出层样式*/ #popup{position:absolute;
width:100%;
height:100%;
z-index:888;
background:#666;
filter:alpha(opacity=60);
opacity: 0.6;
display:none;}/*遮罩层样式*/
</style>
</head> <body>
<div id="popup"></div>
<div style="width:200px" id="LoginWind">
用户名:<input type="text" id="txtName" /><br />
密码:<input type="text" id="txtPwd" /><br />
<input type="button" id="btnLogin" value="登录" />
</div>
<input type="button" id="btnOPenDiv" value="打开登录窗口" onclick="showPopup(300,200);" /> <script type="text/javascript">
function showPopup(h,w)
{
var popUp=document.getElementById('LoginWind')
popUp.style.top = "200px";
popUp.style.left = "200px";
popUp.style.width = w + "px";
popUp.style.height = h + "px";
popUp.style.visibility = "visible";
document.getElementById("popup").style.display="block";
}
</script>
</body>
</html>
//下面是效果
//代码功能，及CSS效果还可很多可以加强的地方，我这里主要是学习知道它是怎么实现的!
javascript弹出层-DEMO001的更多相关文章
- JavaScript弹出层
1.这个弹出层就是一个DIV 2.看需要什么效果 2.1.如果是仅仅需要弹出层,而背后的网页同样可以点击,那么只需要一个DIV即可,效果如图: 2.2.需要一层透明背景,而后面的网页只能看不能点,效果 ...
- html+javascript实现可拖动可提交的弹出层对话框效果
本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- 使用JavaScript实现弹出层效果
声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...
- javascript网页弹出层练习
网页中经常出现很多"popup"弹窗效果,这里做一个练习,给我们初学者一个参考. HTML代码: <div id="popup"></div& ...
- JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 【Javascript Demo】遮罩层和百度地图弹出层简单实现
其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...
随机推荐
- C#基础视频教程6.3 如何简单读写数据库
在继续往下做之前,我们需要把之前的代码尽可能的精简(会对后面很有好处,而且读者也应该仔细比对这一部分的代码和上一部分哪里真正得到了优化,从而提高编程水平). 首先数据库的操作类有哪些是可以做的更加普遍 ...
- VS中的代码拖放
平时数据操作中,我们经常在选择文件,由于数据太多.数据目录太深,选择数据文件到TextBox中非常不方便,于是就想让控件支持拖放数据,很多软件都支持这个功能,非常实用. 在ArcGIS10.x开发平台 ...
- PHP FTP函数
PHP FTP 函数 PHP FTP 简介 FTP 函数通过文件传输协议 (FTP) 提供对文件服务器的客户端访问. FTP 函数用于打开.登录以及关闭连接,同时用于上传.下载.重命名.删除及获取文件 ...
- KineticJS教程（4）
KineticJS教程(4) 作者: ysm 4.图形样式 4.1.填充 Kinetic中图形的填充属性可以在构造方法中的config参数中的fill属性进行设定,也可以用图形对象的setFill方 ...
- Unity协程（Coroutine）原理深入剖析再续
Unity协程(Coroutine)原理深入剖析再续 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处:http.dsqiu.iteye.com 前面已经介绍过对协程(Coroutine ...
- JavaScript ,Css and Jquery In OpenERP 7.0
From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...
- 【linux】Linux查看各类日志
Log位置: /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关的日志信息 /var/log/ma ...
- RDS for MySQL 如何使用 Percona Toolkit
Percona Toolkit 包含多种用于 MySQL 数据库管理的工具. 下面介绍常用的 pt-online-schema-change 和 pt-archiver 搭配 RDS MySQL ...
- blender, merge顶点
选择Edit Mode:,和vertex select: 同时选中两个要merge的顶点(同时选中多个顶点:http://www.cnblogs.com/wantnon/p/4526573.html) ...
- drawer navigation, tabhostFragment 默认导向
问题: 项目结构,在一个抽屉导航中的第一个抽屉中加入了一个tabHostFragment,每次进入项目都是在抽屉导航的默认界面,须要把抽屉划出来再选择某个抽屉. 可是想让APP直接跳转到第一个抽屉界面 ...