<!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级封装练习题--点击登录弹出登录对话框的更多相关文章

  1. ASP.NET点击按钮弹出确认对话框方法

    开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...

  2. jQuery 学习笔记2 点击时弹出一个对话框

    上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  3. asp.net 中点击button弹出模式对话框，选择值后返回到页面中(window.showModalDialog实现)

    <td>现从事专业</td><td>       <asp:TextBox ID="tbMajor" runat="server ...

  4. html中用href 实现点击链接弹出文件下载对话框

    浏览器支持能够打开的格式,他都会默认直接在线打开(比如word或图片),不支持的格式,他就会弹出下载提示.最好是做成.rar格式.xlsx的文件.浏览器自带下载功能. <body> < ...

  5. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  6. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  7. QUI操作超时弹出登录窗口登录的处理方式

    在使用QUI开发的业务系统中,如果长时间没操作,session过期后,再次操作系统超时会自动跳转到登陆页面,如果当前有一些操作没有保存,需要重新登录后再次填写信息,用户体验很不好! 为了避免超时后页面 ...

  8. JS弹出下载对话框以及实现常见文件类型的下载

    写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. ...

  9. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

随机推荐

  1. Retro 2013

    现在的team里每个迭代都会做一次retro,回顾这两周的情况,有哪些做得好的地方,有哪些做得不足的地方,并制定出一系列action,以期望在下一个迭代中解决这些问题.我觉得这种形式挺不错.因此今年的 ...

  2. 个人阅读作业——M1/M2总结

    ~ http://www.cnblogs.com/wx1306/p/4831950.html 在这篇博客中,我提出来一些关于软件工程的问题,但随着这一个学期的即将结束,以及我对软件开发的了解的深入,我 ...

  3. oracle数据泵实现不同用户之间的导出导入

    来源于:http://www.cnblogs.com/kevinsun/archive/2007/02/03/638803.aspx http://blog.sina.com.cn/s/blog_68 ...

  4. C++_直接插入排序

    #include <iostream> using namespace std; void insertSort(int a[], int n) {     for(int i=1;i&l ...

  5. 【CodeVS 1582】【SDOI 2009】E和D

    http://codevs.cn/problem/1582/ 首先我打了一张50*50的表(4用#代替) 并没有发现什么规律! 然后观察题解可得,我观察的是TimeMachine学长的题解 什么得到s ...

  6. 如何在CentOS 5/6上安装EPEL源

    EPEL 是什么? EPEL (Extra Packages for Enterprise Linux,企业版Linux的额外软件包) 是Fedora小组维护的一个软件仓库项目,为RHEL/CentO ...

  7. RSA数字证书管理

    RSA数字证书管理分为以下几个部分: 1:在存储区内创建数字证书: 2:导出数字证书私钥: 3:导出数字证书公钥: 4:导入数字证书; 5:读取数字证书. 1:在.net开发环境中,在证书存储区内创建 ...

  8. dede使用方法---如何调用指定栏目

    使用dede的时候,我们需要调用某一个指定的栏目,这个时候我们该如何使用标签呢?? 真相就是----{dede:type typeid='27'}*******{/dede:type} 完整的标签代码 ...

  9. 纯css控制－表格表头固定,内容多时滚动内容

    <html> <head> <style type="text/css"> * { margin: 0; padding: 0; } /*所有内 ...

  10. Yii2的Debug工具

    yii2的Debug工具 调用   r=debug 可以对程序进行性能分析,从而对程序进行改良 (1)数据库某条sql语句的执行时间 (2)debug的profiling标签 \YII::beginP ...