From 4bb3baa61e33b9eda69fb92becb2df3d96bb1801 Mon Sep 17 00:00:00 2001
From: liteng <930372551@qq.com>
Date: Thu, 5 Jul 2018 12:09:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=80=81=E6=A1=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/Modal.js           | 26 +++++++++++++++----------
 test/ui/22 ModalTest.html | 40 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 53 insertions(+), 13 deletions(-)
diff --git a/src/ui/Modal.js b/src/ui/Modal.js
index 8bcded08..522e74cf 100644
--- a/src/ui/Modal.js
+++ b/src/ui/Modal.js
@@ -11,8 +11,8 @@ function Modal(options) {
     options = options || {};
 
     this.id = options.id || null;
-    this.width = options.width || 500;
-    this.height = options.height || 300;
+    this.width = options.width || '500px';
+    this.height = options.height || '300px';
 };
 
 Modal.prototype = Object.create(Container.prototype);
@@ -30,20 +30,26 @@ Modal.prototype.render = function () {
 
     this.parent.appendChild(this.dom);
 
-    this.dom.addEventListener('click', this.hide.bind(this));
-
     this.container = document.createElement('div');
-    this.container.dom.style.width = this.width + 'px';
-    this.container.dom.style.height = this.height + 'px';
-    this.container.dom.style.padding = '8px';
-    this.container.dom.style.backgroundColor = '#ffffff';
-    this.container.dom.style.boxShadow = '0px 5px 10px rgba(0,0,0,0.5)';
+    this.container.style.width = this.width;
+    this.container.style.height = this.height;
+    this.container.style.padding = '8px';
+    this.container.style.backgroundColor = '#ffffff';
+    this.container.style.boxShadow = '0px 5px 10px rgba(0,0,0,0.5)';
 
     this.dom.appendChild(this.container);
+
+    var _this = this;
+
+    this.children.forEach(function (n) {
+        var obj = XType.create(n);
+        obj.parent = _this.container;
+        obj.render();
+    });
 };
 
 Modal.prototype.show = function () {
-    this.dom.style.display = 'block';
+    this.dom.style.display = 'flex';
     return this;
 };
 
diff --git a/test/ui/22 ModalTest.html b/test/ui/22 ModalTest.html
index 99444e08..9fb40131 100644
--- a/test/ui/22 ModalTest.html	
+++ b/test/ui/22 ModalTest.html	
@@ -6,6 +6,12 @@
     <meta charset="utf-8">
     <title>Modal Test</title>
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
 </head>
 
 <body>
@@ -14,12 +20,40 @@
     <script>
         var control = Shadow.UI.XType.create({
             xtype: 'modal',
-            onChange: function () {
-                console.log(this.getValue());
-            }
+            width: '300px',
+            height: '200px',
+            children: [{
+                xtype: 'row',
+                children: [{
+                    xtype: 'text',
+                    text: 'Username'
+                }, {
+                    xtype: 'input',
+                    value: ''
+                }]
+            }, {
+                xtype: 'row',
+                children: [{
+                    xtype: 'text',
+                    text: 'Password'
+                }, {
+                    xtype: 'input',
+                    value: ''
+                }]
+            }]
         });
 
         control.render();
+
+        var button = Shadow.UI.XType.create({
+            xtype: 'button',
+            text: 'Push me',
+            onClick: function () {
+                control.show();
+            }
+        });
+
+        button.render();
     </script>
 </body>
 
