[added] ability to change default 'ReactModalPortal' class (#208)

A new portalClassName prop in the <Modal> component lets us change
the wrapper className.

Author: manuhabitela

Diff for: README.md

@@ -57,6 +57,8 @@ you can pass `className` and `overlayClassName` props to the Modal.  If you do
 this then none of the default styles will apply and you will have full control
 over styling via CSS.
 
+You can also pass a `portalClassName` to change the wrapper's class (*ReactModalPortal*).
+This doesn't affect styling as no styles are applied to this element by default.
 
 ### Overriding styles globally
 The default styles above are available on `Modal.defaultStyles`. Changes to this

Diff for: lib/components/Modal.js

@@ -30,6 +30,7 @@ var Modal = React.createClass({
       content: React.PropTypes.object,
       overlay: React.PropTypes.object
     }),
+    portalClassName: React.PropTypes.string,
     appElement: React.PropTypes.instanceOf(SafeHTMLElement),
     onAfterOpen: React.PropTypes.func,
     onRequestClose: React.PropTypes.func,
@@ -41,6 +42,7 @@ var Modal = React.createClass({
   getDefaultProps: function () {
     return {
       isOpen: false,
+      portalClassName: 'ReactModalPortal',
       ariaHideApp: true,
       closeTimeoutMS: 0,
       shouldCloseOnOverlayClick: true
@@ -49,7 +51,7 @@ var Modal = React.createClass({
 
   componentDidMount: function() {
     this.node = document.createElement('div');
-    this.node.className = 'ReactModalPortal';
+    this.node.className = this.props.portalClassName;
     document.body.appendChild(this.node);
     this.renderPortal(this.props);
   },

Diff for: specs/Modal.spec.js

@@ -107,6 +107,12 @@ describe('Modal', function () {
     equal(tabPrevented, true);
   });
 
+  it('supports portalClassName', function () {
+    var modal = renderModal({isOpen: true, portalClassName: 'myPortalClass'});
+    equal(modal.node.className, 'myPortalClass');
+    unmountModal();
+  });
+
   it('supports custom className', function() {
     var modal = renderModal({isOpen: true, className: 'myClass'});
     notEqual(modal.portal.refs.content.className.indexOf('myClass'), -1);