fix bugs

README.md

@@ -37,7 +37,7 @@ artDialog v6 —— 经典的网页对话框组件，内外皆用心雕琢。
 2. 更好的交互体验：更加先进的焦点管理，支持无障碍访问
 3. 面向未来：基于 HTML5 Dialog 的 API
 4. 模块化：支持 AMD、CMD 规范
-5. 可选增强插件：拖拽支持、简化框架页面调用
+5. 可选增强版：拖拽支持、简化框架页面调用
 
 ##	授权协议
 

dist/dialog-plus.js

@@ -53,22 +53,24 @@ function Popup () {
     this.destroyed = false;
 
 
-    this.__popup = $('<div />')
+    this.__popup = $('<div />')/*使用 <dialog /> 可能导致 z-index 永远置顶的问题*/
     .attr({
         tabindex: '-1'
     })
     .css({
         display: 'none',
         position: 'absolute',
+        /*
         left: 0,
         top: 0,
         bottom: 'auto',
         right: 'auto',
         margin: 0,
         padding: 0,
-        outline: 0,
         border: '0 none',
         background: 'transparent'
+        */
+        outline: 0
     })
     .html(this.innerHTML)
     .appendTo('body');
@@ -219,8 +221,6 @@ $.extend(Popup.prototype, {
         this.__backdrop.show();
 
 
-
-
         this.reset().focus();
         this.__dispatchEvent('show');
 
@@ -247,7 +247,7 @@ $.extend(Popup.prototype, {
             this.__popup.hide().removeClass(this.className + '-show');
             this.__backdrop.hide();
             this.open = false;
-            this.blur();
+            this.blur();// 恢复焦点，照顾键盘操作的用户
             this.__dispatchEvent('close');
         }
 
@@ -272,10 +272,6 @@ $.extend(Popup.prototype, {
         this.__popup.remove();
         this.__backdrop.remove();
 
-
-        // 恢复焦点，照顾键盘操作的用户
-        this.blur();
-
         if (!_isIE6) {
             $(window).off('resize', this.__onresize);
         }
@@ -986,6 +982,7 @@ artDialog.create = function (options) {
             'onmousedown' in document ? 'mousedown' : 'click',
             function () {
             that._trigger('cancel');
+            return false;// 阻止抢夺焦点
         });
     }
 

dist/dialog.js

@@ -53,22 +53,24 @@ function Popup () {
     this.destroyed = false;
 
 
-    this.__popup = $('<div />')
+    this.__popup = $('<div />')/*使用 <dialog /> 可能导致 z-index 永远置顶的问题*/
     .attr({
         tabindex: '-1'
     })
     .css({
         display: 'none',
         position: 'absolute',
+        /*
         left: 0,
         top: 0,
         bottom: 'auto',
         right: 'auto',
         margin: 0,
         padding: 0,
-        outline: 0,
         border: '0 none',
         background: 'transparent'
+        */
+        outline: 0
     })
     .html(this.innerHTML)
     .appendTo('body');
@@ -219,8 +221,6 @@ $.extend(Popup.prototype, {
         this.__backdrop.show();
 
 
-
-
         this.reset().focus();
         this.__dispatchEvent('show');
 
@@ -247,7 +247,7 @@ $.extend(Popup.prototype, {
             this.__popup.hide().removeClass(this.className + '-show');
             this.__backdrop.hide();
             this.open = false;
-            this.blur();
+            this.blur();// 恢复焦点，照顾键盘操作的用户
             this.__dispatchEvent('close');
         }
 
@@ -272,10 +272,6 @@ $.extend(Popup.prototype, {
         this.__popup.remove();
         this.__backdrop.remove();
 
-
-        // 恢复焦点，照顾键盘操作的用户
-        this.blur();
-
         if (!_isIE6) {
             $(window).off('resize', this.__onresize);
         }
@@ -986,6 +982,7 @@ artDialog.create = function (options) {
             'onmousedown' in document ? 'mousedown' : 'click',
             function () {
             that._trigger('cancel');
+            return false;// 阻止抢夺焦点
         });
     }
 

doc/index.html

@@ -373,20 +373,19 @@ <h2><span id="module">引入 artDialog</span></h2>
 
 <h3>1.直接引用</h3>
 
-<pre><code>&lt;link rel="stylesheet" href="css/ui-dialog.css"&gt;
+<pre><code>&lt;script src="lib/jquery-1.10.2.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="css/ui-dialog.css"&gt;
 &lt;script src="dist/dialog-min.js"&gt;&lt;/script&gt;
 //..
 </code></pre>
 
 <h3>2.作为 RequireJS 或 SeaJS 的模块引入</h3>
 
-<pre><code>var dialog = require('./artDialog/src/dialog');
+<pre><code>var dialog = require('./src/dialog');
 //..
 </code></pre>
 
-<p><strong>注意：</strong>：内部依赖全局模块<code>require('jquery')</code>，请注意全局模块配置是否正确。</p>
-
-<p><a href="../test/show.html">seajs加载示例</a></p>
+<p><strong>注意：</strong>内部依赖全局模块<code>require('jquery')</code>，请注意全局模块配置是否正确。<a href="../test/show.html">seajs加载示例</a></p>
 
 <blockquote><p>如果需要支持 <a href="#quickref-iframe">iframe</a> 内容与拖拽，请引用加强版 dialog-plus.js</p></blockquote>
 
@@ -419,6 +418,8 @@ <h3><span id="quickref-bubble">气泡浮层</span></h3>
 d.show(document.getElementById('quickref-bubble'));
 </code></pre>
 
+<p><a href="../test/align.html">12 个方向定位演示</a></p>
+
 <h3><span id="quickref-button">添加按钮</span></h3>
 
 <p>1.确定与取消按钮：</p>
@@ -1065,7 +1066,7 @@ <h3>示例</h3>
 d.show(document.getElementById('option-align'));
 </code></pre>
 
-<p><a href="../test/align.html">各个参数演示</a></p>
+<p><a href="../test/align.html">12 个方向定位演示</a></p>
 
 <h3><span id="option-autofocus">autofocus</span></h3>
 

doc/index.md

@@ -91,14 +91,15 @@ artDialog —— 经典的网页对话框组件，内外皆用心雕琢。
 
 ###	1.直接引用
 
+	<script src="lib/jquery-1.10.2.js"></script>
 	<link rel="stylesheet" href="css/ui-dialog.css">
 	<script src="dist/dialog-min.js"></script>
 	//..
 
 ###	2.作为 RequireJS 或 SeaJS 的模块引入
 
 ```
-var dialog = require('./artDialog/src/dialog');
+var dialog = require('./src/dialog');
 //..
 ```
 

src/dialog.js

@@ -187,6 +187,7 @@ artDialog.create = function (options) {
             'onmousedown' in document ? 'mousedown' : 'click',
             function () {
             that._trigger('cancel');
+            return false;// 阻止抢夺焦点
         });
     }
 

src/popup.js

@@ -21,22 +21,24 @@ function Popup () {
     this.destroyed = false;
 
 
-    this.__popup = $('<div />')
+    this.__popup = $('<div />')/*使用 <dialog /> 可能导致 z-index 永远置顶的问题*/
     .attr({
         tabindex: '-1'
     })
     .css({
         display: 'none',
         position: 'absolute',
+        /*
         left: 0,
         top: 0,
         bottom: 'auto',
         right: 'auto',
         margin: 0,
         padding: 0,
-        outline: 0,
         border: '0 none',
         background: 'transparent'
+        */
+        outline: 0
     })
     .html(this.innerHTML)
     .appendTo('body');
@@ -187,8 +189,6 @@ $.extend(Popup.prototype, {
         this.__backdrop.show();
 
 
-
-
         this.reset().focus();
         this.__dispatchEvent('show');
 
@@ -215,7 +215,7 @@ $.extend(Popup.prototype, {
             this.__popup.hide().removeClass(this.className + '-show');
             this.__backdrop.hide();
             this.open = false;
-            this.blur();
+            this.blur();// 恢复焦点，照顾键盘操作的用户
             this.__dispatchEvent('close');
         }
 
@@ -240,10 +240,6 @@ $.extend(Popup.prototype, {
         this.__popup.remove();
         this.__backdrop.remove();
 
-
-        // 恢复焦点，照顾键盘操作的用户
-        this.blur();
-
         if (!_isIE6) {
             $(window).off('resize', this.__onresize);
         }

test/focus.html

@@ -5,7 +5,9 @@
 	<title>test</title>
 </head>
 <body>
-<button data-event="test">open dialog</button> <input id="input" />
+<button data-event="test">test1</button>
+<br />
+<button data-event="test2">test2</button> <input id="input" />
 <script src="../lib/sea.js"></script>
 <script>
 seajs.config({
@@ -16,24 +18,52 @@
 </script>
 
 <script>
+if (!this.console) {
+	this.console = {
+		log: function () {}
+	};
+}
+
 seajs.use(['jquery', '../src/dialog'], function ($, dialog) {
-
+
+	$(document).on('focusin', function (event) {
+		console.log('activeElement', event.target);
+	});
+
 	$('button[data-event=test]').on('click', function () {
-		$('#input').focus();
+		console.log('根据浏览器规则，此时焦点应该在按钮上');
+
+		var d = dialog({
+			quickClose: true,
+			content: 'hello world',
+			follow: this,
+			onclose: function () {
+				console.log('对话框执行close()操作，此时焦点应该恢复到对话框出现之前的元素上');
+			}
+		});
+
+		d.show();
+		console.log('对话框执行show()方法，焦点应该在对话框上');
+	});
+
+	$('button[data-event=test2]').on('click', function () {
+		console.log('根据浏览器规则，此时焦点应该在按钮上');
+
 		var d = dialog({
 			quickClose: true,
-			autofocus: false,
 			content: '输入错误，请重新输入',
-			okValue: '确 定',
 			onclose: function () {
 				$('#input').focus();
+				console.log('对话框执行close()操作，如果开发者对焦点操作，那么将使用开发者的设置');
 			},
 			follow: $('#input')[0]
 		});
 
 		d.show();
+		console.log('对话框执行show()方法，焦点应该在对话框上');
 	});
 
+
 });
 </script>
 </body>