JS-DOM2级封装练习题--点击登录弹出登录对话框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="gjf-702004176@qq.com" />
<title>Document-DOM2级封装练习题</title>
<style>
* {
margin: 0;
padding: 0;
}
.head {
font-size: 12px;
padding: 6px 0 0 10px;
}
#login_box {
width: 300px;
height: 150px;
background: #eee;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -75px;
display: none;
}
#login_box p {
height: 20px;
border-bottom: 1px solid #ccc;
font-size: 12px;
padding: 6px 0 0 5px;
font-weight: bold;
}
#close {
width: 14px;
height: 14px;
background-color: red;
position: absolute;
right: 4px;
top: 6px;
}
</style>
<script>
window.onload = function() {
var login_btn = document.getElementById('login'),
login_box = document.getElementById('login_box'),
close = document.getElementById('close');
// 封装添加事件监听程序，封装到一个函数addEvent中，接受三个参数：要执行的对象（就是获取的id变量名）、事件类型（click。mouseover等）、执行的函数（这里表示调用显示函数/隐藏函数）
function addEvent(ele, type, hander) {
if(ele.addEventListener) {//如果浏览器支持addEventListener方法，（适配于除ie8及以下浏览器之外的浏览器）
ele.addEventListener(type, hander, false);//就使用这个方法，true表示事件捕获，false表示事件冒泡
} else if(ele.attachEvent) {//如果是ie8及以下的浏览器，
ele.attachEvent('on' + type, hander);//就用这个方法，因为传进来的type事件都不必要添加‘on’，但是ie少不了on，就在type前加上‘on’，不用加false或ture，因为ie只支持冒泡，默认是false也只有false
} else {
ele['on' + type] = hander;//不支持dom2级操作的话，就调用dom0级的样式，就比如obj.onclick = function(){}一样，ele=obj，onclick='on'+type，hander=function(){}；值得注意的是，1：需要加'on'，因为传过来type时不用加on但是dom0级调用事件是要有on的。2：[]的处理方式，而不是'.'，因为变量不能调用字符串的方法，其实ele.onclick === ele['onclick'],这两个写法完全相等。所以不能使用'.'的情况下，用['']的方法。
}
}
// 显示登录层函数
function showLogin() {//普通的通过js操作css样式的代码，只不过定义成了一个函数封装起来一会方便调用。
// 执行代码
login_box.style.display = "block";
}
// 隐藏登录层函数
function hideLogin() {
// 执行代码
login_box.style.display = "none";
}
//点击登录按钮显示登录层
// 执行代码
addEvent(login_btn,'click', showLogin);//调用函数，传三个参数，分别是要承载、执行事件的按钮id变量名，事件名称-不加on，触发这个事件后会调用或执行的函数（名）
//点击关闭按钮隐藏登录层
// 执行代码
addEvent(close,'click', hideLogin);//同上，添加了一个单机时隐藏的事件。
}
</script>
</head>
<body>
<div class="head">亲，您好！<input type="button" value="登 录" id="login"></div>
<div id="login_box">
<p>用户登录</p><span id="close"></span>
</div>
</body>
</html>
JS-DOM2级封装练习题--点击登录弹出登录对话框的更多相关文章
- ASP.NET点击按钮弹出确认对话框方法
开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...
- jQuery 学习笔记2 点击时弹出一个对话框
上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- asp.net 中点击button弹出模式对话框，选择值后返回到页面中(window.showModalDialog实现)
<td>现从事专业</td><td> <asp:TextBox ID="tbMajor" runat="server ...
- html中用href 实现点击链接弹出文件下载对话框
浏览器支持能够打开的格式,他都会默认直接在线打开(比如word或图片),不支持的格式,他就会弹出下载提示.最好是做成.rar格式.xlsx的文件.浏览器自带下载功能. <body> < ...
- 第一百三十三节，JavaScript，封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- js登录弹出框插件
第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...
- QUI操作超时弹出登录窗口登录的处理方式
在使用QUI开发的业务系统中,如果长时间没操作,session过期后,再次操作系统超时会自动跳转到登陆页面,如果当前有一些操作没有保存,需要重新登录后再次填写信息,用户体验很不好! 为了避免超时后页面 ...
- JS弹出下载对话框以及实现常见文件类型的下载
写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. ...
- jQuery点击图片弹出放大可拖动图片查看
CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...
随机推荐
- [BZOJ3142][HNOI2013]数列（组合）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3142 分析: 考虑差值序列a1,a2,...,ak-1 那么对于一个确定的差值序列,对 ...
- lambda函数、lambda表达式
C++11 新特性:Lambda 表达式 豆子 2012年5月15日 C++ 10条评论 参考文章:https://blogs.oracle.com/pcarlini/entry/c_1x_tidbi ...
- Beta冲刺---Day2
站立式会议 站立式会议内容总结: 221: 昨日完成: 1.这几天的安排,接口测试. 今天要完成: 1.协作编写系负责人审核 遇到问题: 1.无 328: 昨天完成的事情: 1.无 今天要完成的事情: ...
- jquery使用淘宝接口跨域查询手机号码归属地实例
<h1>手机号码归属地查询</h1> <div class="outer"> <p>请输入手机号码</p& ...
- PHP ElasticSearch的使用
系统是Windows server 2003. ElasticSearch是一个基于Lucene的稳定的.分布式.RESTFul的搜索引擎.其实所谓的RestFul就是它提供URL供你调用(建立索引和 ...
- [转]div与span区别及用法
DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
- iOS开发--换肤简单实现以及工具类的抽取
一.根据美工提供的图片,可以有两种换肤的方案. <1>美工提供图片的类型一: <2>美工提供图片的类型二:这种分了文件夹文件名都一样的情况,拖入项目后最后用真实文件夹(蓝色文件 ...
- Java Decompiler 反编译工具下载地址及JD-Eclipse设置菜单翻译
官网地址:http://jd.benow.ca/ JD-GUI:jd-gui-0.3.6.windows.zip JD-Eclipse:jd-eclipse-site-1.0.0-RC2.zip 菜单 ...
- Android任务和返回栈完全解析，细数那些你所不知道的细节
附:Android task详解 出处:http://blog.csdn.net/guolin_blog/article/details/41087993 原文: http://developer. ...
- BuiltWith
BuiltWith网站技术信息查询工具 利用该网站所提供的功能,你可以查询出某网站背后是由哪些技术来支持的, 比如操作系统的类型.所采用的访问量统计服务.采用的发布平台.广告平台.语言框架.聚合功能. ...