Added contained modal example

Author: mtscout6

docs/assets/style.css

@@ -72,7 +72,7 @@ body {
   margin-top: 10px;
 }
 
-.bs-example .modal {
+.bs-example .static-modal .modal {
   position: relative;
   top: auto;
   right: auto;
@@ -137,3 +137,12 @@ body {
 .code-toggle.open {
   background: #f8f5ec;
 }
+
+// Minimal CSS Needed for contained modals
+.modal-container {
+  position: relative;
+}
+.modal-container .modal, .modal-container .modal-backdrop {
+  position: absolute;
+}
+

docs/examples/ModalContained.js

@@ -0,0 +1,42 @@
+/** @jsx React.DOM */
+
+/**
+ * You will want to include this bit of css
+ *
+ * .modal-container {
+ *   position: relative;
+ * }
+ * .modal-container .modal, .modal-container .modal-backdrop {
+ *   position: absolute;
+ * }
+ */
+
+
+var ContainedModal = React.createClass({
+  render: function() {
+    return this.transferPropsTo(
+      <Modal title='Contained Modal' animation>
+        <div className="modal-body">
+          Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
+        </div>
+        <div className="modal-footer">
+          <Button onClick={this.props.onRequestHide}>Close</Button>
+        </div>
+      </Modal>
+    );
+  }
+});
+
+var Trigger = React.createClass({
+  render: function() {
+    return (
+      <div className='modal-container' style={{height: 200}}>
+        <ModalTrigger modal={<ContainedModal container={this} />} container={this}>
+          <Button bsStyle="primary" bsSize="large">Launch contained modal</Button>
+        </ModalTrigger>
+      </div>
+    );
+  }
+});
+
+React.renderComponent(<Trigger />, mountNode);

docs/examples/ModalStatic.js

@@ -5,18 +5,20 @@ function handleHide() {
 }
 
 var modalInstance = (
-    <Modal title="Modal title"
-      backdrop={false}
-      animation={false}
-      onRequestHide={handleHide}>
-      <div className="modal-body">
-        One fine body...
-      </div>
-      <div className="modal-footer">
-        <Button>Close</Button>
-        <Button bsStyle="primary">Save changes</Button>
-      </div>
-    </Modal>
+    <div className="static-modal">
+      <Modal title="Modal title"
+        backdrop={false}
+        animation={false}
+        onRequestHide={handleHide}>
+        <div className="modal-body">
+          One fine body...
+        </div>
+        <div className="modal-footer">
+          <Button>Close</Button>
+          <Button bsStyle="primary">Save changes</Button>
+        </div>
+      </Modal>
+    </div>
   );
 
-React.renderComponent(modalInstance, mountNode);
+React.renderComponent(modalInstance, mountNode);

docs/src/ComponentsPage.js

@@ -218,6 +218,20 @@ var ComponentsPage = React.createClass({
                   <h3 id="modals-custom">Custom trigger</h3>
                   <p>Use <code>&lt;OverlayMixin /&gt;</code> in a custom component to manage the modal's state yourself.</p>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/ModalOverlayMixin.js', 'utf8')} />
+
+                  <h3 id="modals-custom">Contained Modal</h3>
+                  <p>You will need to add the following css to your project and ensure that your container has the <code>modal-container</code> class.</p>
+                  <pre>
+                    {React.DOM.code(null,
+                      ".modal-container {\n" +
+                      "  position: relative;\n" +
+                      "}\n" +
+                      ".modal-container .modal, .modal-container .modal-backdrop {\n" +
+                      "  position: absolute;\n" +
+                      "}\n"
+                    )}
+                  </pre>
+                  <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8')} />
                 </div>
 
                 {/* Tooltip */}