Skip to content

Commit dc7ef19

Browse files
corevancorevan
corevan
authored and
corevan
committed
[added] dialogClassName prop to modal to be able to pass custom css class to modal-dialog div
1 parent f12ec59 commit dc7ef19

File tree

7 files changed

+125
-2
lines changed

7 files changed

+125
-2
lines changed

‎docs/assets/docs.css

+3
Original file line numberDiff line numberDiff line change
@@ -1077,6 +1077,9 @@ h1[id] {
10771077
margin-right: auto;
10781078
margin-left: auto;
10791079
}
1080+
.custom-modal {
1081+
width: 90%;
1082+
}
10801083

10811084
/* Example dropdowns */
10821085
.bs-example > .dropdown > .dropdown-toggle {

‎docs/examples/ModalCustomSizing.js

+37
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/examples/ModalDefaultSizing.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const MySmallModal = React.createClass({
2+
render() {
3+
return (
4+
<Modal {...this.props} bsSize='small' title='Modal heading' animation={false}>
5+
<div className='modal-body'>
6+
<h4>Wrapped Text</h4>
7+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
8+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
9+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
10+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
11+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
12+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
13+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
14+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
15+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
16+
</div>
17+
<div className='modal-footer'>
18+
<Button onClick={this.props.onRequestHide}>Close</Button>
19+
</div>
20+
</Modal>
21+
);
22+
}
23+
});
24+
25+
const MyLargeModal = React.createClass({
26+
render() {
27+
return (
28+
<Modal {...this.props} bsSize='large' title='Modal heading' animation={false}>
29+
<div className='modal-body'>
30+
<h4>Wrapped Text</h4>
31+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
32+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
33+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
34+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
35+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
36+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
37+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
38+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
39+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
40+
</div>
41+
<div className='modal-footer'>
42+
<Button onClick={this.props.onRequestHide}>Close</Button>
43+
</div>
44+
</Modal>
45+
);
46+
}
47+
});
48+
49+
const overlayTriggerInstance = (
50+
<ButtonToolbar>
51+
<ModalTrigger modal={<MySmallModal />}>
52+
<Button bsStyle='primary' bsSize='large'>Launch small demo modal</Button>
53+
</ModalTrigger>
54+
<ModalTrigger modal={<MyLargeModal />}>
55+
<Button bsStyle='primary' bsSize='large'>Launch large demo modal</Button>
56+
</ModalTrigger>
57+
</ButtonToolbar>
58+
);
59+
60+
React.render(overlayTriggerInstance, mountNode);

‎docs/src/ComponentsPage.js

+8
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,14 @@ const ComponentsPage = React.createClass({
236236
)}
237237
</pre>
238238
<ReactPlayground codeText={Samples.ModalContained} />
239+
240+
<h3 id='modal-default-sizing'>Sizing modals using standard Bootstrap props</h3>
241+
<p>You can specify a bootstrap large or small modal by using the "bsSize" prop.</p>
242+
<ReactPlayground codeText={Samples.ModalDefaultSizing} />
243+
244+
<h3 id='modal-custom-sizing'>Sizing modals using custom css</h3>
245+
<p>You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.</p>
246+
<ReactPlayground codeText={Samples.ModalCustomSizing} />
239247
</div>
240248

241249
{/* Tooltip */}

‎docs/src/Samples.js

+2
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export default {
3333
ModalTrigger: require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'),
3434
ModalOverlayMixin: require('fs').readFileSync(__dirname + '/../examples/ModalOverlayMixin.js', 'utf8'),
3535
ModalContained: require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
36+
ModalDefaultSizing: require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),
37+
ModalCustomSizing: require('fs').readFileSync(__dirname + '/../examples/ModalCustomSizing.js', 'utf8'),
3638
TooltipBasic: require('fs').readFileSync(__dirname + '/../examples/TooltipBasic.js', 'utf8'),
3739
TooltipPositioned: require('fs').readFileSync(__dirname + '/../examples/TooltipPositioned.js', 'utf8'),
3840
TooltipInCopy: require('fs').readFileSync(__dirname + '/../examples/TooltipInCopy.js', 'utf8'),

‎src/Modal.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const Modal = React.createClass({
2020
keyboard: React.PropTypes.bool,
2121
closeButton: React.PropTypes.bool,
2222
animation: React.PropTypes.bool,
23-
onRequestHide: React.PropTypes.func.isRequired
23+
onRequestHide: React.PropTypes.func.isRequired,
24+
dialogClassName: React.PropTypes.string
2425
},
2526

2627
getDefaultProps() {
@@ -55,7 +56,7 @@ const Modal = React.createClass({
5556
className={classNames(this.props.className, classes)}
5657
onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
5758
ref="modal">
58-
<div className={classNames(dialogClasses)}>
59+
<div className={classNames(this.props.dialogClassName, dialogClasses)}>
5960
<div className="modal-content">
6061
{this.props.title ? this.renderHeader() : null}
6162
{this.props.children}

‎test/ModalSpec.js

+12
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,16 @@ describe('Modal', function () {
8585
assert.ok(dialog.className.match(/\bmodal-sm\b/));
8686
});
8787

88+
it('Should pass dialogClassName to the dialog', function () {
89+
let noOp = function () {};
90+
let instance = ReactTestUtils.renderIntoDocument(
91+
<Modal dialogClassName="testCss" onRequestHide={noOp}>
92+
<strong>Message</strong>
93+
</Modal>
94+
);
95+
96+
let dialog = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'modal-dialog');
97+
assert.match(dialog.props.className, /\btestCss\b/);
98+
});
99+
88100
});

0 commit comments

Comments
 (0)