diff --git a/IPython/html/static/notebook/js/widgets/container.js b/IPython/html/static/notebook/js/widgets/container.js
index ebaeee684..0bd9211b4 100644
--- a/IPython/html/static/notebook/js/widgets/container.js
+++ b/IPython/html/static/notebook/js/widgets/container.js
@@ -115,6 +115,7 @@ define(["notebook/js/widget"], function(widget_manager) {
that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
})
+ this.$el_to_style = this.$body;
this._shown_once = false;
},
@@ -165,6 +166,25 @@ define(["notebook/js/widget"], function(widget_manager) {
this.$body.append(view.$el);
},
+ _get_selector_element: function(selector) {
+
+ // Since the modal actually isn't within the $el in the DOM, we need to extend
+ // the selector logic to allow the user to set css on the modal if need be.
+ // The convention used is:
+ // "modal" - select the modal div
+ // "modal [selector]" - select element(s) within the modal div.
+ // "[selector]" - select elements within $el
+ // "" - select the $el_to_style
+ if (selector.substring(0, 5) == 'modal') {
+ if (selector == 'modal') {
+ return this.$window;
+ } else {
+ return this.$window.find(selector.substring(6));
+ }
+ } else {
+ return IPython.WidgetView.prototype._get_selector_element.call(this, selector);
+ }
+ },
});