Add preview image modal

docs/pattern/navigation.md

@@ -6,3 +6,13 @@
 ---
 
 占位。
+
+<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/mFRzGiKZvfHJvRC.png">
+
+占位。
+
+占位。
+
+占位。
+
+占位。

scripts/demo.js

@@ -145,4 +145,40 @@ window.BrowserDemo = React.createClass({
   }
 });
 
+var Modal = antd.Modal;
+var PriviewImg = React.createClass({
+  getInitialState() {
+    return {
+      visible: false
+    };
+  },
+  showImageModal() {
+    this.setState({
+      visible: true
+    });
+  },
+  handleCancel() {
+    this.setState({
+      visible: false
+    });
+  },
+  render() {
+    return (
+      <span className="preview-image-wrapper">
+        <img src={this.props.src} onClick={this.showImageModal} alt={this.props.alt} />
+        <Modal className="image-modal" width="800" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
+          <img src={this.props.src} alt={this.props.alt} />
+        </Modal>
+      </span>
+    );
+  }
+});
+
+$(function() {
+  Array.slice(document.querySelectorAll('.preview-img')).forEach(function(img) {
+    img.parentNode.className = 'preview-image';
+    ReactDOM.render(<PriviewImg src={img.src} />, img.parentNode);
+  });
+});
+
 module.exports = antd;

site/static/style.css

@@ -1229,3 +1229,34 @@ a.entry-link:hover .anticon-smile {
   background: #fff;
   font-size: 12px;
 }
+
+p.preview-image {
+  float: right;
+  margin: 0;
+  margin-right: -10%;
+}
+
+.preview-image-wrapper {
+  width: 600px;
+  background: #F2F2F2;
+  padding: 24px;
+  display: inline-block;
+  text-align: center;
+}
+
+.preview-image img {
+  cursor: pointer;
+  max-width: 100%;
+}
+
+.image-modal {
+  text-align: center;
+}
+
+.image-modal .ant-modal-header {
+  display: none;
+}
+
+.image-modal img {
+  max-width: 100%;
+}