<!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. android之广播(一)

    Android中的广播 系统在运行过程中会产生很多事件,某些事件产生的时候,比如:电量的改变,收发短信.拨打电话.屏幕解锁.开机等等,系统会发送广播.只要应用程序接受到这条广播就知道系统发生了相应的事 ...

  2. SqlServer——批量操作（批量添加，删除）

    批量添加数据: 一条insert语句批量插入多条记录 常见的insert语句,向数据库中,一条语句只能插入一条数据: insert into persons (id_p, lastname , fir ...

  3. 11-cp 命令总结

  4. c++ iterator(迭代器)分类及其使用

    前言: 以下的内容为我阅读c++沉思录18,19,20章的笔记以及自己的想法. 正文: 总所周知,c++的stl中提出了iterator的概念,这是C所没有的.在一般的使用中,iterator的行为很 ...

  5. javascript获得客户端IP的又一方法

    <script language="JavaScript">VIH_BackColor = "palegreen";VIH_ForeColor = ...

  6. Linux下C++静态库、动态库的制作与使用

    参考博文:C++静态库与动态库 >> 静态库 1. 静态库的制作 a) 编辑 name.cpp 和name.h文件 b) $g++ -c name.cpp //注意带参数-c,否则直接编译 ...

  7. poj1236 强连通缩点

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15211   Accepted: 60 ...

  8. quartz介绍

    Quartz 是一个开源的作业调度框架,它完全由 Java 写成,并设计用于 J2SE 和 J2EE 应用中.它提供了巨大的灵活性而不牺牲简单性.你能够用它来为执行一个作业而创建简单的或复杂的调度.本 ...

  9. Win7另存文件没有桌面的解决方法

    今日一朋友保存文件随口说了一句我那个桌面找不到了...我略感惊奇,没遇到这么个情况.决定,问度娘,在此做下记录,以便以后自己或朋友查阅. 我们在网上另存一个文件,打开另存窗口,发现没有“桌面” 在收藏 ...

  10. Java多线程与并发库高级应用-Callable与Future的应用

    Callable这种任务可以返回结果,返回的结果可以由Future去拿 >Future取得的结果类型和Callable返回的结果类型必须一致,这是通过泛型来实现的. >Completion ...