Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 1x 1x 1x 1x 1x 2x 2x 2x 2x | import React, { Component } from 'react';
import { Modal, Button, Popover, Tooltip, OverlayTrigger } from 'react-bootstrap';
class ModalDialog extends Component {
constructor(props, context) {
super(props, context);
this.handleClose = this.handleClose.bind(this);
this.state = {
show: this.props.showDialog
};
console.log('dialog contructor');
}
handleClose() {
this.setState({ show: false });
}
render() {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;
console.log('modal state: ', this.state.showDialog);
return (
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Text in a modal</h4>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
<h4>Popover in a modal</h4>
<p>
there is a{' '}
<OverlayTrigger overlay={popover}>
<a href="#popover">popover</a>
</OverlayTrigger>{' '}
here
</p>
<h4>Tooltips in a modal</h4>
<p>
there is a{' '}
<OverlayTrigger overlay={tooltip}>
<a href="#tooltip">tooltip</a>
</OverlayTrigger>{' '}
here
</p>
<hr />
<h4>Overflowing text to show scroll behavior</h4>
<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>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur
et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<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>
<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>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur
et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<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>
<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>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur
et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<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>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleClose}>Close</Button>
</Modal.Footer>
</Modal>
);
}
}
export default ModalDialog;
|