.show() now uses pure css to center the dialog

component · Feb 16, 2015 · a2aa591 · a2aa591
1 parent 36cfdf9
commit a2aa591
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/dialog.css b/dialog.css
@@ -1,16 +1,22 @@
 .dialog {
   position: fixed;
-  left: 50%;
   top: 150px;
-  max-width: 600px;
-  min-width: 250px;
-  border: 1px solid #eee;
-  background: white;
+  left: 5%;
+  width: 90%;
   z-index: 1000;
+  text-align: center;
 }
 
 .dialog .content {
+  box-sizing: border-box;
+  position: relative;
+  background: white;
+  max-width: 600px;
+  min-width: 252px;
+  border: 1px solid #eee;
   padding: 15px 20px;
+  display: inline-block;
+  text-align: left;
 }
 
 /* close */
@@ -77,4 +83,11 @@
 .dialog.scale.hide {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
-}
+}
+
+/* off-center */
+
+.dialog.off-center {
+  text-align: left;
+  width: inherit;
+}
diff --git a/index.js b/index.js
@@ -73,7 +73,7 @@ function Dialog(options) {
   this.render(options);
   if (active && !active.hiding) active.hide();
   if (exports.effect) this.effect(exports.effect);
-  
+
   active = this;
   this.on('escape', function(){
     active.hide();
@@ -247,11 +247,6 @@ Dialog.prototype.show = function(){
 
   // position
   document.body.appendChild(this.el);
-  if (!this._fixed) {
-    setTimeout(function() {
-      self.el.style.marginLeft = -(self.el.offsetWidth / 2) + 'px'
-    }, 0);
-  }
   this._classes.remove('hide');
   this.emit('show');
   return this;