通过jquery的show()和hide()函数联合使用，实现弹出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、弹出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看弹出窗口结果：
七、关闭弹出窗后，打开开发者中心，如下：
使用 HTML5 的 Notification API的方法：1、申请权限
出于安全考虑，要发送桌面消息，需要先申请用户授权。Notification对象提供了一个静态的方法——requestPermission()，它接收一个回调函数作为参数，并把返回值传递给回调函数作为参数：
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status
}
})
返回值为字符串，有以下三个值：
default
granted
denied
默认为default，也就是需要询问，表现和denied一样。
2、创建消息
用户授权以后，就可以通过下面方式创建一条桌面提醒了：
var n = new Notification(title, options)
options为字典，传入Notification对象的属性。
3、包含属性
Notification对象有如下几个只读属性：
dir(文字方向，经测试都不支持)
lang(语言)
body(消息体)
tag(标签)
icon(icon地址)
这几个属性都可以在创建消息的时候，作为option传入Notification构造函数。提一下tag属性，在有很多消息的时候，这个属性就非常有用，它会用拥有相同tag的最新的消息取代之前的消息，只显示一条最新的消息。比如在一个聊天室系统中，同时和几个人在聊天的时候，就可以以人名为tag显示不同人的最新消息。
4、定义事件
Notification对象有四个事件，分别是
onshow()
onclick()
onclose()
onerror()
分别在消息显示、被点击、被关闭和出错的时候被触发。下面的例子中完整的展示了这四个事件的使用。通常情况下，只需要处理点击事件就够了，比如点击消息后跳转到某一特定的页面。
举例说明：
window.addEventListener("load", function(){
if(Notification &&Notification.permission !== "granted"){
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status
}
})
}
var button = document.getElementsByTagName("button")[0]
button.addEventListener("click", function(){
var t = new Date().toLocaleString()
var options={
dir: "ltr",
lang: "utf-8",
icon: "http://ihuster.com/static/avatar/m_default.png",
body: "你好呀，欢迎留言交流呀"
}
if(Notification &&Notification.permission === "granted"){
var n = new Notification("HUSTecho: "+ t, options)
n.onshow = function(){
console.log("You got me!")
}
n.onclick = function() {
alert("You clicked me!")
window.location = "/"
}
n.onclose = function(){
console.log("notification closed!")
}
n.onerror = function() {
console.log("An error accured")
}
}else if(Notification &&Notification.permission !== "denied") {
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status
}
if(status === "granted"){
for(var i = 0i <3i++){
var n = new Notification("Hi! " + i, {
tag: "Beyoung",
icon: "http://ihuster.com/static/avatar/b_default.png",
body: "你好呀，我是第" + i +"条消息啦！"
})
}
}
})
}else{
alert("Hi!")
}
})
})
