import  React from "react";
import {Modal,Alert} from "../../../component"
import modalmd from './modal.md'


class ModalDoc extends React.Component {
  constructor() {
    super();
  }

  showModal(size) {
    this.setState({modalState: true, size: size});
  }

  closeModal() {
    this.setState({modalState: false});
  }

  render() {
    let {modalState,size} = this.state || {};
    return (
      <div>
        <div>
          <pre>
            <button className="btn btn-primary" onClick={this.showModal.bind(this,'lg')}>大的模态框</button>
            &nbsp;
            <button className="btn btn-primary" onClick={this.showModal.bind(this,'md')}>中的模态框</button>
            &nbsp;
            <button className="btn btn-primary" onClick={this.showModal.bind(this,'sm')}>小的模态框</button>
          </pre>
          <Modal size={size} title="提示" closebtn={true} show={modalState} onHide={this.closeModal.bind(this)}>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" onClick={this.closeModal.bind(this)}>Close</button>
              <button type="button" className="btn btn-primary" onClick={this.closeModal.bind(this)}>Save changes
              </button>
            </div>
          </Modal>
          <div dangerouslySetInnerHTML={{__html: modalmd}}></div>
        </div>
      </div>
    )
  }
}

export default ModalDoc;