diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
new file mode 100644
index 0000000000..e073616bc2
--- /dev/null
+++ b/docs/examples/ModalStatic.js
@@ -0,0 +1,22 @@
+
+const modalInstance = (
+  <div className='static-modal'>
+    <Modal.Dialog>
+      <Modal.Header>
+        <Modal.Title>Modal title</Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body>
+        One fine body...
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Button>Close</Button>
+        <Button bsStyle='primary'>Save changes</Button>
+      </Modal.Footer>
+
+    </Modal.Dialog>
+  </div>
+);
+
+React.render(modalInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 1c64e7120d..e46c15cbd6 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -260,6 +260,10 @@ const ComponentsPage = React.createClass({
                 <div className='bs-docs-section'>
                   <h1 className='page-header'><Anchor id='modals'>Modals</Anchor> <small>Modal</small></h1>
 
+                  <h3><Anchor id='modals-static'>Static Markup</Anchor></h3>
+                  <p>A modal dialog component</p>
+                  <ReactPlayground codeText={Samples.ModalStatic} />
+
                   <h3><Anchor id='modals-live'>Basic example</Anchor></h3>
                   <p></p>
                   <p>
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index 67b1580bd8..e765b084e5 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -34,6 +34,7 @@ export default {
   PanelGroupAccordion:           require('fs').readFileSync(__dirname + '/../examples/PanelGroupAccordion.js', 'utf8'),
   CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
   Modal:                         require('fs').readFileSync(__dirname + '/../examples/Modal.js', 'utf8'),
+  ModalStatic:                   require('fs').readFileSync(__dirname + '/../examples/ModalStatic.js', 'utf8'),
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
   ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),
   ModalCustomSizing:             require('fs').readFileSync(__dirname + '/../examples/ModalCustomSizing.js', 'utf8'),
diff --git a/src/Modal.js b/src/Modal.js
index 417e53fda4..b7744aedb0 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -1,15 +1,13 @@
 /*eslint-disable react/prop-types */
 import React, { cloneElement } from 'react';
-
 import classNames from 'classnames';
-import createChainedFunction from './utils/createChainedFunction';
-import BootstrapMixin from './BootstrapMixin';
 import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
+import createChainedFunction from './utils/createChainedFunction';
 
 import Portal from './Portal';
 import Fade from './Fade';
-
+import Dialog from './ModalDialog';
 import Body from './ModalBody';
 import Header from './ModalHeader';
 import Title from './ModalTitle';
@@ -93,12 +91,11 @@ function getScrollbarSize(){
   return scrollbarSize;
 }
 
-
-const ModalMarkup = React.createClass({
-
-  mixins: [ BootstrapMixin ],
-
+const Modal = React.createClass({
   propTypes: {
+    ...Portal.propTypes,
+    ...Dialog.propTypes,
+
     /**
      * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
      */
@@ -112,17 +109,6 @@ const ModalMarkup = React.createClass({
      * Open and close the Modal with a slide and fade animation.
      */
     animation: React.PropTypes.bool,
-    /**
-     * A Callback fired when the header closeButton or non-static backdrop is clicked.
-     * @type {function}
-     * @required
-     */
-    onHide: React.PropTypes.func.isRequired,
-
-    /**
-     * A css class to apply to the Modal dialog DOM node.
-     */
-    dialogClassName: React.PropTypes.string,
 
     /**
      * When `true` The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes.
@@ -138,62 +124,70 @@ const ModalMarkup = React.createClass({
     enforceFocus: React.PropTypes.bool
   },
 
-  getDefaultProps() {
+  getDefaultProps(){
     return {
-      bsClass: 'modal',
+      show: false,
+      animation: true,
       backdrop: true,
       keyboard: true,
-      animation: true,
-      closeButton: true,
-
       autoFocus: true,
       enforceFocus: true
     };
   },
 
   getInitialState(){
-    return { };
+    return {exited: !this.props.show};
   },
 
   render() {
-    let state = this.state;
-    let modalStyle = { ...state.dialogStyles, display: 'block'};
-    let dialogClasses = this.getBsClassSet();
+    let { children, animation, backdrop, ...props } = this.props;
 
-    delete dialogClasses.modal;
-    dialogClasses['modal-dialog'] = true;
+    let show = !!props.show;
 
-    let classes = {
-      modal: true,
-      in: this.props.show && !this.props.animation
-    };
+    const mountModal = show || (animation && !this.state.exited);
+    if (!mountModal) {
+      return null;
+    }
 
     let modal = (
-      <div
-        {...this.props}
-        title={null}
-        tabIndex="-1"
-        role="dialog"
-        style={modalStyle}
-        className={classNames(this.props.className, classes)}
-        onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
-        ref="modal">
-        <div className={classNames(this.props.dialogClassName, dialogClasses)}>
-          <div className="modal-content" role='document'>
-            { this.renderContent() }
-          </div>
-        </div>
-      </div>
+      <Dialog {...props}
+        ref={this._setDialogRef}
+        className={classNames({ in: show && !animation })}
+        onClick={backdrop === true ? this.handleBackdropClick : null}
+      >
+        { this.renderContent() }
+      </Dialog>
     );
 
-    return this.props.backdrop ?
-      this.renderBackdrop(modal, state.backdropStyles) : modal;
+    if ( animation ) {
+      modal = (
+        <Fade
+          transitionAppear
+          unmountOnExit
+          in={show}
+          duration={Modal.TRANSITION_DURATION}
+          onExited={this.handleHidden}
+        >
+          { modal }
+        </Fade>
+      );
+    }
+
+    if (backdrop) {
+      modal = this.renderBackdrop(modal);
+    }
+
+    return (
+      <Portal container={props.container}>
+        { modal }
+      </Portal>
+    );
   },
 
   renderContent() {
     return React.Children.map(this.props.children, child => {
       // TODO: use context in 0.14
-      if (child.type.__isModalHeader) {
+      if (child && child.type && child.type.__isModalHeader) {
         return cloneElement(child, {
           onHide: createChainedFunction(this.props.onHide, child.props.onHide)
         });
@@ -204,7 +198,7 @@ const ModalMarkup = React.createClass({
 
   renderBackdrop(modal) {
     let { animation } = this.props;
-    let duration = Modal.BACKDROP_TRANSITION_DURATION; //eslint-disable-line no-use-before-define
+    let duration = Modal.BACKDROP_TRANSITION_DURATION;
 
     let backdrop = (
       <div ref="backdrop"
@@ -214,7 +208,7 @@ const ModalMarkup = React.createClass({
     );
 
     return (
-      <div>
+      <div ref='modal'>
         { animation
             ? <Fade transitionAppear in={this.props.show} duration={duration}>{backdrop}</Fade>
             : backdrop
@@ -224,19 +218,49 @@ const ModalMarkup = React.createClass({
     );
   },
 
-  iosClickHack() {
-    // IOS only allows click events to be delegated to the document on elements
-    // it considers 'clickable' - anchors, buttons, etc. We fake a click handler on the
-    // DOM nodes themselves. Remove if handled by React: https://github.com/facebook/react/issues/1169
-    React.findDOMNode(this.refs.modal).onclick = function () {};
-    React.findDOMNode(this.refs.backdrop).onclick = function () {};
+  _setDialogRef(ref){
+    this.refs.dialog = ref;
+
+    //maintains backwards compat with older component breakdown
+    if (!this.props.backdrop) {
+      this.refs.modal = ref;
+    }
+  },
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.show) {
+      this.setState({exited: false});
+    } else if (!nextProps.animation) {
+      // Otherwise let handleHidden take care of marking exited.
+      this.setState({exited: true});
+    }
   },
 
-  componentWillMount(){
-    this.checkForFocus();
+  componentWillUpdate(nextProps){
+    if (nextProps.show) {
+      this.checkForFocus();
+    }
   },
 
   componentDidMount() {
+    if ( this.props.show ){
+      this.onShow();
+    }
+  },
+
+  componentDidUpdate(prevProps) {
+    let { animation } = this.props;
+
+    if ( prevProps.show && !this.props.show && !animation) {
+      //otherwise handleHidden will call this.
+      this.onHide();
+    }
+    else if ( !prevProps.show && this.props.show ) {
+      this.onShow();
+    }
+  },
+
+  onShow() {
     const doc = domUtils.ownerDocument(this);
     const win = domUtils.ownerWindow(this);
 
@@ -244,7 +268,7 @@ const ModalMarkup = React.createClass({
       EventListener.listen(doc, 'keyup', this.handleDocumentKeyUp);
 
     this._onWindowResizeListener =
-        EventListener.listen(win, 'resize', this.handleWindowResize);
+      EventListener.listen(win, 'resize', this.handleWindowResize);
 
     if (this.props.enforceFocus) {
       this._onFocusinListener = onFocus(this, this.enforceFocus);
@@ -270,19 +294,7 @@ const ModalMarkup = React.createClass({
       , () => this.focusModalContent());
   },
 
-  componentDidUpdate(prevProps) {
-    if (this.props.backdrop && this.props.backdrop !== prevProps.backdrop) {
-      this.iosClickHack();
-      this.setState(this._getStyles()); //eslint-disable-line react/no-did-update-set-state
-    }
-
-    if (this.props.container !== prevProps.container) {
-      let container = getContainer(this);
-      this._containerIsOverflowing = container.scrollHeight > containerClientHeight(container, this);
-    }
-  },
-
-  componentWillUnmount() {
+  onHide() {
     this._onDocumentKeyupListener.remove();
     this._onWindowResizeListener.remove();
 
@@ -299,6 +311,13 @@ const ModalMarkup = React.createClass({
     this.restoreLastFocus();
   },
 
+  handleHidden(...args) {
+    this.setState({ exited: true });
+
+    this.onHide();
+
+  },
+
   handleBackdropClick(e) {
     if (e.target !== e.currentTarget) {
       return;
@@ -327,7 +346,7 @@ const ModalMarkup = React.createClass({
   },
 
   focusModalContent () {
-    let modalContent = React.findDOMNode(this.refs.modal);
+    let modalContent = React.findDOMNode(this.refs.dialog);
     let current = domUtils.activeElement(this);
     let focusInModal = current && domUtils.contains(modalContent, current);
 
@@ -351,13 +370,21 @@ const ModalMarkup = React.createClass({
     }
 
     let active = domUtils.activeElement(this);
-    let modal = React.findDOMNode(this.refs.modal);
+    let modal = React.findDOMNode(this.refs.dialog);
 
     if (modal !== active && !domUtils.contains(modal, active)){
       modal.focus();
     }
   },
 
+  iosClickHack() {
+    // IOS only allows click events to be delegated to the document on elements
+    // it considers 'clickable' - anchors, buttons, etc. We fake a click handler on the
+    // DOM nodes themselves. Remove if handled by React: https://github.com/facebook/react/issues/1169
+    React.findDOMNode(this.refs.modal).onclick = function () {};
+    React.findDOMNode(this.refs.backdrop).onclick = function () {};
+  },
+
   _getStyles() {
     if ( !domUtils.canUseDom ) { return {}; }
 
@@ -374,51 +401,7 @@ const ModalMarkup = React.createClass({
       }
     };
   }
-});
-
-const Modal = React.createClass({
-  propTypes: {
-    ...Portal.propTypes,
-    ...ModalMarkup.propTypes
-  },
 
-  getDefaultProps(){
-    return {
-      show: false,
-      animation: true
-    };
-  },
-
-  render() {
-    let { children, ...props } = this.props;
-
-    let show = !!props.show;
-
-    let modal = (
-      <ModalMarkup {...props} ref='modal'>
-        { children }
-      </ModalMarkup>
-    );
-
-    return (
-      <Portal container={props.container}>
-        { props.animation
-            ? (
-              <Fade
-                in={show}
-                transitionAppear={show}
-                duration={Modal.TRANSITION_DURATION}
-                unmountOnExit
-              >
-                { modal }
-              </Fade>
-            )
-            : show && modal
-        }
-
-      </Portal>
-    );
-  }
 });
 
 Modal.Body = Body;
@@ -426,6 +409,8 @@ Modal.Header = Header;
 Modal.Title = Title;
 Modal.Footer = Footer;
 
+Modal.Dialog = Dialog;
+
 Modal.TRANSITION_DURATION = 300;
 Modal.BACKDROP_TRANSITION_DURATION = 150;
 
diff --git a/src/ModalDialog.js b/src/ModalDialog.js
new file mode 100644
index 0000000000..08552f6802
--- /dev/null
+++ b/src/ModalDialog.js
@@ -0,0 +1,59 @@
+/*eslint-disable react/prop-types */
+import React from 'react';
+import classNames from 'classnames';
+import BootstrapMixin from './BootstrapMixin';
+
+const ModalDialog = React.createClass({
+
+  mixins: [ BootstrapMixin ],
+
+  propTypes: {
+
+    /**
+     * A Callback fired when the header closeButton or non-static backdrop is clicked.
+     * @type {function}
+     * @required
+     */
+    onHide: React.PropTypes.func.isRequired,
+
+    /**
+     * A css class to apply to the Modal dialog DOM node.
+     */
+    dialogClassName: React.PropTypes.string
+
+  },
+
+  getDefaultProps() {
+    return {
+      bsClass: 'modal',
+      closeButton: true
+    };
+  },
+
+  render() {
+    let modalStyle = { display: 'block'};
+    let dialogClasses = this.getBsClassSet();
+
+    delete dialogClasses.modal;
+    dialogClasses['modal-dialog'] = true;
+
+    return (
+      <div
+        {...this.props}
+        title={null}
+        tabIndex="-1"
+        role="dialog"
+        style={modalStyle}
+        className={classNames(this.props.className, 'modal')}
+      >
+        <div className={classNames(this.props.dialogClassName, dialogClasses)}>
+          <div className="modal-content" role='document'>
+            { this.props.children }
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
+
+export default ModalDialog;
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 66bb5be9e2..70f0000583 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -52,6 +52,7 @@ describe('Modal', function () {
         );
       }
     });
+
     let instance = render(
           <Container />
         , mountPoint);
@@ -60,7 +61,7 @@ describe('Modal', function () {
 
     assert.ok(React.findDOMNode(instance).className.match(/\bmodal-open\b/));
 
-    let backdrop = React.findDOMNode(modal.refs.modal).getElementsByClassName('modal-backdrop')[0];
+    let backdrop = React.findDOMNode(modal.refs.backdrop);
 
     ReactTestUtils.Simulate.click(backdrop);
 
@@ -74,18 +75,17 @@ describe('Modal', function () {
   it('Should close the modal when the backdrop is clicked', function (done) {
     let doneOp = function () { done(); };
     let instance = render(
-      <Modal show onHide={doneOp}>
+      <Modal show onHide={doneOp} animation={false}>
         <strong>Message</strong>
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.modal)
-      .getElementsByClassName('modal-backdrop')[0];
+    let backdrop = React.findDOMNode(instance.refs.backdrop);
 
     ReactTestUtils.Simulate.click(backdrop);
   });
 
-  it('Should close the modal when the modal background is clicked', function (done) {
+  it('Should close the modal when the modal dialog is clicked', function (done) {
     let doneOp = function () { done(); };
 
     let instance = render(
@@ -94,10 +94,9 @@ describe('Modal', function () {
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.modal)
-        .getElementsByClassName('modal')[0];
+    let dialog = React.findDOMNode(instance.refs.dialog);
 
-    ReactTestUtils.Simulate.click(backdrop);
+    ReactTestUtils.Simulate.click(dialog);
   });
 
   it('Should close the modal when the modal close button is clicked', function (done) {
@@ -140,6 +139,32 @@ describe('Modal', function () {
     assert.match(dialog.props.className, /\btestCss\b/);
   });
 
+  it('Should pass transition callbacks to Transition', function (done) {
+    let count = 0;
+    let increment = ()=> count++;
+
+    let instance = render(
+      <Modal show
+        onHide={()=>{}}
+        onExit={increment}
+        onExiting={increment}
+        onExited={()=> {
+          increment();
+          expect(count).to.equal(6);
+          done();
+        }}
+        onEnter={increment}
+        onEntering={increment}
+        onEntered={()=> {
+          increment();
+          instance.setProps({ show: false });
+        }}
+      >
+        <strong>Message</strong>
+      </Modal>
+      , mountPoint);
+  });
+
   describe('Focused state', function () {
     let focusableContainer = null;