component · everyonesdesign · Mar 20, 2015
diff --git a/dialog.css b/dialog.css
@@ -91,3 +91,25 @@
   text-align: left;
   width: inherit;
 }
+
+/* dialog wrap */
+
+.dialog-wrap {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.dialog-wrap.not-modal {
+  cursor: pointer;
+}
+
+.dialog-wrap .dialog {
+  position: absolute;
+  margin-bottom: 150px;
+  cursor: auto;
+}
diff --git a/index.js b/index.js
@@ -223,6 +223,45 @@ Dialog.prototype.fixed = function(){
   return this;
 }
 
+/**
+ * Wraps the dialog el with .dialog-wrap element. 
+ * Useful for nice scrollbar feature in large dialogs.
+ * Can be used with overlay only (otherwise it will generate overlay by itself)!
+ *
+ * @return {Dialog} for chaining
+ * @api public
+ */
+
+Dialog.prototype.wrap = function(){
+  var self = this;
+  var wrap = document.createElement('div');
+  wrap.className = 'dialog-wrap';
+
+  //if no overlay add it
+  if (!self._overlay) {
+    self._overlay  = overlay();
+  }
+
+  //as wrap covers all screen it should take care of close on overlay zone click (if not modal)
+  if (!self._classes.has('modal')) {
+    wrap.className += ' not-modal'
+    events.bind(wrap, 'click', function(e) {
+      if (e.target === wrap) {
+        self.emit('close');
+        self.hide();
+      }
+    });
+  }
+
+  //append dialog
+  wrap.appendChild(self.el);
+
+  //redefine this.el so methods like remove can clean up full wrap instead of the element
+  self.el = wrap;
+
+  return this;
+}
+
 /**
  * Show the dialog.
  *

diff --git a/test/index.html b/test/index.html
@@ -23,6 +23,9 @@
         top: 20px;
         left: 15%;
       }
+      .dialog.pretty-high .content {
+        min-height: 1000px;
+      }
     </style>
   </head>
   <body>
@@ -95,6 +98,18 @@
                       console.log('closed eight');
                     });
 
+                      dialog('Pretty high wrapped dialog')
+                      .effect('fade')
+                      .overlay()
+                      .closable()
+                      .fixed()
+                      .wrap()
+                      .addClass('pretty-high')
+                      .show()
+                      .on('hide', function(){
+                        console.log('closed nine');
+                      });
+
                   });
                 });
               });