Specify/Set width and height on a react-boostrap modal

问题

How can I apply a dynamic width and height to a react-bootstrap modal window? I have checked the react-bootstrap docs here but could not figure out how to do that. Actually the value of width and height props would be dynamic (could be any values) as this will be a reusable component in my app (to be used on many pages) thus can't apply width/height through some CSS class.

'bsSize' property as mentioned in docs also not working, although predefined sizes of xs, md, lg is not what I exactly want, rather I need width and height to be set on modal via props.

Here is my sample JSX code:

var MyWindow = React.createClass({
    getInitialState() {
        return { show: true };
    },
    close() {
        this.setState({ show: false });
    },
    open() {
        this.setState({ show: true });
    },
    save() {

    },
    render: function () {

        var Button = ReactBootstrap.Button,
            Modal = ReactBootstrap.Modal,
            ModalBody = ReactBootstrap.ModalBody,
            ModalHeader = ReactBootstrap.ModalHeader,
            ModalFooter = ReactBootstrap.ModalFooter,
            ModalTitle = ReactBootstrap.ModalTitle;

        return (
            <Modal show={this.state.show} onHide={this.close}>
                <ModalHeader closeButton>
                    <ModalTitle>My Cool Window</ModalTitle>
                </ModalHeader>
                <ModalBody>
                    <h4>Text in a modal</h4>
                    <p>Duis mollis, est non commodo luctus</p>
                </ModalBody>
                <ModalFooter>
                    <Button onClick={this.close}>Cancel</Button>
                    <Button bsStyle="primary" onClick={this.save}>Save</Button>
                </ModalFooter>
            </Modal>
        );

    }
});

React.render(<MyWindow width={700} height={400} />, mountNode);

回答1:

According to its documentation, you have to customize your own css class to achieve the style you want via modal's prop dialogClassName.

So we might have my.jsx code below:

<Modal dialogClassName="my-modal">
</Modal>

With my.css below:

.my-modal {
    width: 90vw    /* Occupy the 90% of the screen width */
    max-width: 90vw;
}

Then you will have your custmized modal!

来源：https://stackoverflow.com/questions/32624634/specify-set-width-and-height-on-a-react-boostrap-modal

标签

size

jsx

react-bootstrap