ant-design/components/modal/demo/basic.html

<div class="code-box">
  <div class="code-box-demo">
    <div id="components-modal-demo-basic"></div>
    <script>(function(){'use strict';

var Modal = antd.Modal;

var Test = React.createClass({
  displayName: 'Test',

  getInitialState: function getInitialState() {
    return {
      visible: false
    };
  },
  showModal: function showModal() {
    this.setState({
      visible: true
    });
  },
  handleOk: function handleOk() {
    console.log('点击了确定');
    this.setState({
      visible: false
    });
  },
  handleCancel: function handleCancel() {
    console.log('点击了取消');
    this.setState({
      visible: false
    });
  },
  render: function render() {
    return React.createElement(
      'div',
      null,
      React.createElement(
        'button',
        { className: "ant-btn ant-btn-primary", onClick: this.showModal },
        '显示对话框'
      ),
      React.createElement(
        Modal,
        { title: "第一个 Modal",
          visible: this.state.visible,
          onOk: this.handleOk,
          onCancel: this.handleCancel },
        React.createElement(
          'p',
          null,
          '对话框的内容'
        ),
        React.createElement(
          'p',
          null,
          '对话框的内容'
        ),
        React.createElement(
          'p',
          null,
          '对话框的内容'
        )
      )
    );
  }
});

React.render(React.createElement(Test, null), document.getElementById('components-modal-demo-basic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Modal = antd.Modal;

<span class="keyword">var</span> Test = React.createClass({
  getInitialState(){
    <span class="keyword">return</span>{
      visible: <span class="literal">false</span>
    }
  },
  showModal() {
    <span class="keyword">this</span>.setState({
      visible: <span class="literal">true</span>
    });
  },
  handleOk() {
    console.log(<span class="string">'点击了确定'</span>);
    <span class="keyword">this</span>.setState({
      visible: <span class="literal">false</span>
    });
  },
  handleCancel() {
    console.log(<span class="string">'点击了取消'</span>);
    <span class="keyword">this</span>.setState({
      visible: <span class="literal">false</span>
    });
  },
  render() {
    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="title">div</span>&gt;</span>
      <span class="tag">&lt;<span class="title">button</span> <span class="attribute">className</span>=<span class="value">"ant-btn ant-btn-primary"</span> <span class="attribute">onClick</span>=<span class="value">{this.showModal}</span>&gt;</span>显示对话框<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
      <span class="tag">&lt;<span class="title">Modal</span> <span class="attribute">title</span>=<span class="value">"第一个 Modal"</span>
      <span class="attribute">visible</span>=<span class="value">{this.state.visible}</span>
        <span class="attribute">onOk</span>=<span class="value">{this.handleOk}</span>
        <span class="attribute">onCancel</span>=<span class="value">{this.handleCancel}</span>&gt;</span>
        <span class="tag">&lt;<span class="title">p</span>&gt;</span>对话框的内容<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
        <span class="tag">&lt;<span class="title">p</span>&gt;</span>对话框的内容<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
        <span class="tag">&lt;<span class="title">p</span>&gt;</span>对话框的内容<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
      <span class="tag">&lt;/<span class="title">Modal</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">div</span>&gt;</span>;</span>
  }
});

React.render(<span class="xml"><span class="tag">&lt;<span class="title">Test</span>/&gt;</span> , document.getElementById('components-modal-demo-basic'));</span></code></pre></div>
  </div>
  <div class="code-box-meta markdown">
    <div class="code-box-title">基本</div>
    <p>第一个对话框。</p>
    <span class="collapse anticon anticon-circle-o-right"></span>
  </div>
</div>