diff --git a/IPython/html/static/notebook/js/widgets/container.js b/IPython/html/static/notebook/js/widgets/container.js
index 7a2574c88..9db6b7a06 100644
--- a/IPython/html/static/notebook/js/widgets/container.js
+++ b/IPython/html/static/notebook/js/widgets/container.js
@@ -59,4 +59,124 @@ define(["notebook/js/widget"], function(widget_manager) {
     });
 
     widget_manager.register_widget_view('ContainerView', ContainerView);
-});
\ No newline at end of file
+
+
+    var ModalView = IPython.WidgetView.extend({
+        
+        render: function(){
+            var that = this;
+            this.$el
+                .html('')
+                .on("remove", function(){
+                    that.$window.remove();
+                });
+            this.$window = $('<div />')
+                .addClass('modal widget-modal')
+                .appendTo($('#notebook-container'));
+            var title_bar = $('<div />')
+                .addClass('popover-title')
+                .appendTo(this.$window);
+            var that = this;
+            $('<button />')
+                .addClass('close')
+                .html('&times;')
+                .appendTo(title_bar)
+                .click(function(){
+                    that.hide();
+                    event.stopPropagation();
+                });
+            this.$title = $('<div />')
+                .addClass('widget-modal-title')
+                .html('&nbsp;')
+                .appendTo(title_bar);
+            this.$body = $('<div />')
+                .addClass('modal-body')
+                .addClass('widget-container')
+                .appendTo(this.$window);
+            
+            this.$show_button = $('<button />')
+                .html('&nbsp;')
+                .addClass('btn btn-info widget-modal-show')
+                .appendTo(this.$el)
+                .click(function(){
+                    that.show();
+                });
+            
+            this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
+            this.$window.resizable();
+            this._shown_once = false;
+        },
+        
+        hide: function() {
+            this.$window.hide();
+            this.$show_button.removeClass('btn-info');
+        },
+        
+        show: function() {
+            this.$window.show();
+            this.$show_button.addClass('btn-info');
+            var position = this.$show_button.offset();
+            this.$window.css('left', position.left + this.$show_button.outerWidth());
+            this.$window.css('top', position.top);
+        },
+        
+        update: function(){
+
+            // Apply flexible box model properties by adding and removing
+            // corrosponding CSS classes.
+            // Defined in IPython/html/static/base/less/flexbox.less
+            this.set_flex_property('vbox', this.model.get('_vbox'));
+            this.set_flex_property('hbox', this.model.get('_hbox'));
+            this.set_flex_property('start', this.model.get('_pack_start'));
+            this.set_flex_property('center', this.model.get('_pack_center'));
+            this.set_flex_property('end', this.model.get('_pack_end'));
+            this.set_flex_property('align-start', this.model.get('_align_start'));
+            this.set_flex_property('align-center', this.model.get('_align_center'));
+            this.set_flex_property('align-end', this.model.get('_align_end'));
+            this.set_flex_property('box-flex0', this.model.get('_flex0'));
+            this.set_flex_property('box-flex1', this.model.get('_flex1'));
+            this.set_flex_property('box-flex2', this.model.get('_flex2'));
+            
+            var description = this.model.get('description');
+            description = description.replace(/ /g, '&nbsp;', 'm');
+            description = description.replace(/\n/g, '<br>\n', 'm');
+            if (description.length == 0) {
+                this.$title.html('&nbsp;'); // Preserve title height
+            } else {
+                this.$title.html(description);
+            }
+            
+            var button_text = this.model.get('button_text');
+            button_text = button_text.replace(/ /g, '&nbsp;', 'm');
+            button_text = button_text.replace(/\n/g, '<br>\n', 'm');
+            if (button_text.length == 0) {
+                this.$show_button.html('&nbsp;'); // Preserve button height
+            } else {
+                this.$show_button.html(button_text);
+            }
+            
+            if (!this._shown_once) {
+                this._shown_once = true;
+                this.show();
+            }
+            
+            return IPython.WidgetView.prototype.update.call(this);
+        },
+
+        set_flex_property: function(property_name, enabled) {
+            if (enabled) {
+                this.$body.addClass(property_name);
+            } else {
+                this.$body.removeClass(property_name);
+            }
+        },
+
+        display_child: function(view) {
+            this.$body.append(view.$el);
+        },
+        
+        
+    });
+
+    widget_manager.register_widget_view('ModalView', ModalView);
+});
diff --git a/IPython/html/widgets/widget_container.py b/IPython/html/widgets/widget_container.py
index 7f5929ec3..4fa6aab1b 100644
--- a/IPython/html/widgets/widget_container.py
+++ b/IPython/html/widgets/widget_container.py
@@ -27,7 +27,9 @@ class ContainerWidget(Widget):
     # classes...
     _keys = ['_vbox', '_hbox', '_align_start', '_align_end', '_align_center',
             '_pack_start', '_pack_end', '_pack_center', '_flex0', '_flex1', 
-            '_flex2']
+            '_flex2', 'description', 'button_text']
+    description = Unicode()
+    button_text = Unicode()
     _hbox = Bool(False)
     _vbox = Bool(False)
     _align_start = Bool(False)