Merge pull request react-bootstrap#321 from react-bootstrap/modalOpen

add modal-open class to modal container when open

Author: trentgrover-wf

docs/examples/ModalStatic.js

@@ -7,6 +7,7 @@ var modalInstance = (
       <Modal title="Modal title"
         backdrop={false}
         animation={false}
+        container={mountNode}
         onRequestHide={handleHide}>
         <div className="modal-body">
           One fine body...

src/Modal.jsx

@@ -124,6 +124,9 @@ var Modal = React.createClass({
     this._onDocumentKeyupListener =
       EventListener.listen(document, 'keyup', this.handleDocumentKeyUp);
 
+    var container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    container.className += container.className.length ? ' modal-open' : 'modal-open';
+
     if (this.props.backdrop) {
       this.iosClickHack();
     }
@@ -137,6 +140,8 @@ var Modal = React.createClass({
 
   componentWillUnmount: function () {
     this._onDocumentKeyupListener.remove();
+    var container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    container.className = container.className.replace(/ ?modal-open/, '');
   },
 
   handleBackdropClick: function (e) {

test/ModalSpec.jsx

@@ -16,6 +16,39 @@ describe('Modal', function () {
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
   });
 
+  it('Should add modal-open class to the modal container while open', function(done) {
+
+    var Container = React.createClass({
+      getInitialState: function() {
+        return {modalOpen: true};
+      },
+      handleCloseModal: function() {
+        this.setState({modalOpen: false});
+      },
+      render: function() {
+        if (this.state.modalOpen) {
+          return <Modal onRequestHide={this.handleCloseModal} container={this}>
+            <strong>Message</strong>
+          </Modal>;
+        } else {
+          return <span/>;
+        }
+      }
+    });
+    var instance = ReactTestUtils.renderIntoDocument(
+        <Container />
+    );
+    assert.ok(instance.getDOMNode().className.match(/\modal-open\b/));
+
+    var backdrop = instance.getDOMNode().getElementsByClassName('modal-backdrop')[0];
+    ReactTestUtils.Simulate.click(backdrop);
+    setTimeout(function(){
+      assert.equal(instance.getDOMNode().className.length, 0);
+      done();
+    }, 0);
+
+  });
+
   it('Should close the modal when the backdrop is clicked', function (done) {
     var doneOp = function () { done(); };
     var instance = ReactTestUtils.renderIntoDocument(