弹出层 第一阶段

.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+.idea

README.md

@@ -1,24 +1,32 @@
 # learn-js
 
+
+**请确认你访问的是主版本 [nimojs/learn-js](https://github.com/nimojs/learn-js)，在主版本中你可以看到所有人的代码提交**
+
+---
+
 这是一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。
 
-组件开发的挑战是循序渐渐的，每个组件开发挑战都必须掌握必要的知识才可以接受。
+组件开发的挑战是循序渐进的，每个组件开发挑战都必须掌握必要的知识才可以接受。
 
 > 点击右上角的 **[Watch](https://github.com/nimojs/learn-js/subscription)** 关注本项目，点击 Star 收藏本项目。
-> 
+
 ---
 
 **参与方式：**
 选择挑战某个组件开发，按阶段完成任务。将自己的代码提交到对应组件中。
 
-[Fork & Pull Requests](fork&pullrequests.md)
+[Fork & Pull Requests | 克隆与请求合并](fork&pullrequests.md)
 
 ## Tab 选项卡
 
 <a href="package/tab/"><img src="package/tab/tab.png" ></a>
 
-### 技能最低要求
-
-1. 熟悉 jQuery
 
 [接受挑战](package/tab/)
+
+## Dialog 弹出层
+
+<a href="package/dialog/"><img src="package/dialog/dialog.png" ></a>
+
+[接受挑战](package/dialog/)

fork&pullrequests.md

@@ -1,9 +1,72 @@
 # 克隆与请求合并
 
+## 注册 GitHub 账号
 
-1. Fork 此项目
-2. 使用 GitHub 客户端 Clone 此项目
-3. 编写代码
-4. 提交代码
-5. 发送合并请求
+[https://github.com/join](https://github.com/join)
 
+## Fork 此项目
+
+[https://github.com/nimojs/learn-js](https://github.com/nimojs/learn-js)
+
+![fork](https://cloud.githubusercontent.com/assets/3949015/7487787/31a3645a-f3f1-11e4-85d8-e9fe041db782.png)
+
+## 安装 GitHub 客户端
+
+下载 [GitHub Windows 离线安装包](http://static.nimojs.com/file/github/github-windows7.zip) 
+
+解压缩后打开 GitHub.exe
+
+![](https://cloud.githubusercontent.com/assets/3949015/7514594/6a6dea84-f4f1-11e4-9530-1f89eed33c29.png) 
+
+
+## Clone 代码到本地
+
+![](https://cloud.githubusercontent.com/assets/3949015/7514669/1bd3e22e-f4f2-11e4-9d4a-4668f59db31c.png)
+
+
+## 编写代码
+
+![](https://cloud.githubusercontent.com/assets/3949015/7514699/60066232-f4f2-11e4-9e98-9cedaa67ae46.png)
+
+在你所挑战的组件目录下的 `code` 文件夹创建你的 GitHub 用户名文件夹和对应挑战的阶段。如：
+
+```
+└── package/
+    └── tab
+		└── code
+        	└── 2319103827 // 你的 GitHub 用户名
+	        	└── 1 	   // 第一阶段代码
+		        	└── index.html
+```
+
+## 提交代码
+
+在 GitHub 中双击项目
+
+![](https://cloud.githubusercontent.com/assets/3949015/7514735/b5105670-f4f2-11e4-9c6c-a8703830f675.png)
+
+填写提交说明
+
+![](https://cloud.githubusercontent.com/assets/3949015/7514821/c5d9812e-f4f3-11e4-962f-f91d150f77c2.png)
+
+点击 COMMIT 按钮
+
+同步代码
+
+![](https://cloud.githubusercontent.com/assets/3949015/7514793/61c16378-f4f3-11e4-9c33-a51b20f97cd4.png)
+
+## 请求合并代码至 [nimojs/learn-js](https://github.com/nimojs/learn-js/pulls)
+
+打开 `https://github.com/你的用户名/learn-js/` 
+
+点击 Pull Requset
+
+![image](https://cloud.githubusercontent.com/assets/3949015/7514891/73cd9f2c-f4f4-11e4-871c-7213b761ad4f.png)
+
+点击 Create pull request
+
+![image](https://cloud.githubusercontent.com/assets/3949015/7514934/ed1ae20e-f4f4-11e4-9d9b-3da335b2588e.png)
+
+nimojs/learn-js 维护者收到 PR 后会合并你的请求。
+
+最终你的代码会显示在 [https://github.com/nimojs/learn-js/blob/gh-pages/package/tab/code/2319103827/1/index.html](https://github.com/nimojs/learn-js/blob/gh-pages/package/tab/code/2319103827/1/index.html)

package/dialog/README.md

@@ -0,0 +1,75 @@
+# Dialog 弹出层
+
+<img src="dialog.png" >
+
+## 阶段 1
+
+实现上图 JS 效果，CSS样式随意。弹出层要水平垂直居中在屏幕中
+
+## 阶段 2
+
+封装成一个 `dialog` 函数，提供如下 api ：
+
+**trigger**
+
+对话框触发元素，可传递选择器。
+
+**content**
+
+容器的内容，可以是纯字符串、dom对象、jQuery对象、html标签字符串。
+
+
+```js
+dialog({
+	trigger: '#btn',
+    content: '<strong>哈哈</strong>'
+})
+```
+
+```html
+<button type="button" id="btn">Click me</button>
+```
+
+点击 Click me 弹出 **哈哈**
+
+可通过参数指定父级DOM、触发DOM、内容DOM。
+
+## 阶段3
+可控制显示和关闭的动画效果
+
+```js
+dialog({
+    trigger: '#btn',
+    content: '<strong>哈哈</strong>',
+    effectShow: function ($element) {
+        // 淡入显示
+        $element.fadeIn(500)
+    },
+    effectHide: function ($element) {
+        // 淡出显示
+        $element.fadeOut(500)
+    }
+})
+```
+
+## 阶段 4
+添加点击关闭时触发的函数，并支持使用键盘 <kbd>ESC</kbd> 键关闭弹出层
+
+```js
+dialog({
+	trigger: '#btn',
+    content: '<strong>哈哈</strong>',
+	onClose: function (element) {
+    	/*
+		element 弹出层 DOM 元素
+		*/
+    }
+})
+```
+## 完成挑战
+
+添加关闭事件
+
+还有更多 API 可以实现，但以上四个阶段已经足够提高你 Dialog 类型组件开发的经验。
+
+如果你将以上所有阶段都完成了， Dialog 的挑战就结束了。但我们希望你继续完善这个组件增加更多的 API。

package/dialog/code/52cik/1.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<meta charset="UTF-8">
+	<title>dialog 阶段一</title>
+	<style>
+	*{margin:0;padding:0;font-size:12px;}
+
+	.dialog {display:none;}
+	.dialog .mask{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.8);}
+	.dialog .box{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;width:500px;height:160px;background-color:#fff;}
+	.dialog .box .title{padding:0 1em;height:40px;border-bottom:1px solid #ddd;background-color:#eee;font-size:14px;line-height:40px;}
+	.dialog .box .content{padding:1em;}
+	.dialog .box .close{position:absolute;top:0;right:0;display:block;width:2em;text-align:center;font-weight:700;font-size:20px;    line-height:40px;cursor:pointer;}
+
+	#btn {display:block;margin:10px auto;padding:.5em 1em;}
+	</style>
+</head>
+<body>
+
+<button id="btn"> 点我 </button>
+
+<div class="dialog">
+	<div class="mask"></div>
+	<div class="box">
+		<div class="title">我是标题</div>
+		<div class="content">我是内容 我是内容</div>
+		<span class="close">&#215;</span>
+	</div>
+</div>
+
+<script src="https://dn-cdnjsnet.qbox.me/jquery/1.10.2/jquery.js"></script>
+<script>
+(function () {
+	var $dialog = $('.dialog');
+
+	$('#btn').on('click', function () {
+		$dialog.fadeIn();
+	});
+
+	$dialog.on('click', '.close', function () {
+		$dialog.fadeOut();
+	});
+})();
+</script>
+</body>
+</html>

package/dialog/code/52cik/2.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<meta charset="UTF-8">
+	<title>dialog 阶段二</title>
+	<style>
+	*{margin:0;padding:0;font-size:12px;}
+
+	.dialog {display:none;}
+	.dialog .mask{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.8);}
+	.dialog .box{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;width:500px;height:160px;background-color:#fff;}
+	.dialog .box .title{padding:0 1em;height:40px;border-bottom:1px solid #ddd;background-color:#eee;font-size:14px;line-height:40px;}
+	.dialog .box .content{padding:1em;}
+	.dialog .box .close{position:absolute;top:0;right:0;display:block;width:2em;text-align:center;font-weight:700;font-size:20px;    line-height:40px;cursor:pointer;}
+
+	.btn {display:block;margin:10px auto;padding:.5em 1em;}
+	</style>
+</head>
+<body>
+
+<button id="btn" class="btn"> 点我 </button>
+
+<div class="dialog">
+	<div class="mask"></div>
+	<div class="box">
+		<div class="title"></div>
+		<div class="content"></div>
+		<span class="close">&#215;</span>
+	</div>
+</div>
+
+<script src="https://dn-cdnjsnet.qbox.me/jquery/1.10.2/jquery.js"></script>
+<script>
+function dialog (opts) {
+	var opt = $.extend({
+	    trigger: '#btn',
+	    title: '标题',
+	    content: '内容'
+	}, opts || {});
+
+
+	var $dialog = $('.dialog');
+	$('.title', $dialog).html(opt.title);
+	$('.content', $dialog).html(opt.content);
+
+	$(opt.trigger).on('click', function () {
+		$dialog.fadeIn();
+	});
+
+	$dialog.on('click', '.close', function () {
+		$dialog.fadeOut();
+	});
+}
+
+dialog({
+	trigger: '#btn',
+    title: '呵呵',
+    content: '<b>哈哈哈哈</b>'
+});
+
+</script>
+</body>
+</html>