<!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. 将Microsoft Ajax Minifier集成到VS2013对JS、CSS进行编译时压缩

    在网站发布中,一般要将js,css文件压缩减少体积,以减少在HTTP请求中的流量.将Microsoft Ajax Minifier集成到VS2013中就可以对JS.CSS进行编译时压缩. VS2013 ...

  2. 前端框架——AmazeUI学习

    AmazeUI官网: http://amazeui.org/ 前后台模板下载:链接:链接:http://pan.baidu.com/s/1c2uVfk0 密码:zuva 十大前端框架参考链接:http ...

  3. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

  4. linux基础-第十三单元 硬盘分区、格式化及文件系统的管理二

    第十三单元 硬盘分区.格式化及文件系统的管理二 文件系统的挂载与卸载 什么是挂载 mount命令的功能 mount命令的用法举例 umount命令的功能 umount命令的用法举例 利用/etc/fs ...

  5. 关于QString中的arg()函数使用方法

    例:正确做法:ui->label->setText(QString("Processingfile%1").arg(index));错误做法: ui->label ...

  6. JSON与js对象序列化

    JavaScript对象表示法(JavaScript Object Notation,简称JSON)是一种轻量级的数据交换格式,它基于js字面量表示法,是js的一个子集.虽然是一个js的子集但是他与语 ...

  7. iOS开发--QQ音乐练习,旋转动画的实现,音乐工具类的封装,定时器的使用技巧,SliderBar的事件处理

    一.旋转动画的实现 二.音乐工具类的封装 -- 返回所有歌曲,返回当前播放歌曲,设置当前播放歌曲,返回下一首歌曲,返回上一首歌曲方法的实现 头文件 .m文件 #import "ChaosMu ...

  8. UML中几种类间关系：继承、实现、依赖、关联、聚合、组合的联系与区别

    继承 指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能,并可以增加它自己的新功能的能力,继承是类与类或者接口与接口之间最常见的关系:在Java中此类关系通过关键字extend ...

  9. 又爱又恨系列之枚举enum

    其实枚举挺简单的,只不过以前没好好学,所以不知道这个东西,恩,现在梳理一下 整体而言,首先枚举是一个数据类型,这个数据类型和结构体有点像 可以分为三个层次 1.枚举数据类型定义 第一种:enum 枚举 ...

  10. hive 函数 Cube

    最近在优化一个报表系统.leader 提示我可以用cube函数.在此记录一下使用: 1) cube 简称数据魔方. 可以实现hive多个任意维度的查询. cube(a,b,c)  首先会对(a,b,c ...