great.

photo/src/ImageList.js

@@ -7,6 +7,25 @@ import ListSubheader from '@material-ui/core/ListSubheader';
 import IconButton from '@material-ui/core/IconButton';
 import InfoIcon from '@material-ui/icons/Info';
 import tileData from './tileData';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import Grid from '@material-ui/core/Grid';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import CloseIcon from '@material-ui/icons/Close';
+import TodayIcon from '@material-ui/icons/Today';
+import CropOriginalIcon from '@material-ui/icons/CropOriginal';
+import CameraIcon from '@material-ui/icons/Camera';
+import LocationOnIcon from '@material-ui/icons/LocationOn'
+import Typography from '@material-ui/core/Typography';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import List from '@material-ui/core/List';
+import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -22,16 +41,58 @@ const useStyles = makeStyles((theme) => ({
     icon: {
         color: 'rgba(255, 255, 255, 0.54)',
     },
+    modal: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    paper: {
+        backgroundColor: theme.palette.background.paper,
+        width: '100%',
+        height: '100%',
+        //boxShadow: theme.shadows[5],
+        //padding: theme.spacing(2, 4, 3),
+    },
+    fabL: {
+        position: 'absolute',
+        bottom: '50%',
+        left: theme.spacing(2),
+    },
+    fabR: {
+        position: 'absolute',
+        bottom: '50%',
+        //left: `calc(95% - ${theme.spacing(2)}px)`,
+        //right: theme.spacing(2),
+        right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
+        Mcontainer: {
+            display: "flex",
+            flexWrap: "wrap",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            height: "100%",
+            width: "100%",
+            alignItems: "center"
+        },
+    },
 }));
-
+var Imagesrc = "";
 
 export default function TitlebarGridList() {
     const classes = useStyles();
 
+    const [Imageopen, setImageOpen] = React.useState(false);
+
+
     const handleClick = (letter) => () => {
-        console.log(letter);
+        Imagesrc = letter;
+        setImageOpen(true);
     }
 
+    const handleImageClose = () => {
+        setImageOpen(false);
+    };
+
     return (
         <div className={classes.root}>
             <GridList cellHeight={180} cols={5} className={classes.gridList}>
@@ -44,6 +105,106 @@ export default function TitlebarGridList() {
                     </GridListTile>
                 ))}
             </GridList>
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                className={classes.modal}
+                open={Imageopen}
+                onClose={handleImageClose}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+            >
+                <Fade in={Imageopen}>
+                    <div className={classes.paper}>
+                        <Grid container spacing={0}>
+                            <Grid item xs={9}
+                                style={{
+                                    alignItems: 'center',
+                                    alignContent: 'center',
+                                    backgroundColor: 'black',
+                                    height: '100vh',
+                                }}
+                                align="center"
+                                justify="center"
+                                direction="column"
+                            >
+                                <Grid
+                                    container
+                                    spacing={0}
+                                    direction="column"
+                                    alignItems="center"
+                                    justify="center"
+                                    style={{ minHeight: '100vh' }}
+                                >
+                                    <Grid item xs={12}>
+                                        <img src={ Imagesrc }
+                                            style={{
+                                                margin: "auto",
+                                                maxHeight: "100vh",
+                                                maxWidth: "100%",
+                                            }}
+
+                                        ></img>
+                                    </Grid>
+
+                                </Grid>
+
+
+                                <Fab color="inherit" aria-label="add" className={classes.fabL}>
+                                    <ArrowBackIosIcon />
+                                </Fab>
+                                <Fab color="inherit" aria-label="add" className={classes.fabR}>
+                                    <ArrowForwardIosIcon />
+                                </Fab>
+                            </Grid>
+                            <Grid item xs={3}>
+                                <Typography component="h5">
+                                    <IconButton aria-label="delete" type="button" onClick={handleImageClose}>
+                                        <CloseIcon />
+                                    </IconButton>
+                                    資訊
+                                </Typography>
+                                <List
+                                    subheader={
+                                        <ListSubheader component="div" id="nested-list-subheader">
+                                            詳細資料
+                                         </ListSubheader>
+                                    }
+                                >
+                                    <ListItem>
+                                        <ListItemIcon>
+                                            <TodayIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="2016年7月14日" secondary="週六 下午5:43 GMT+08:00" />
+                                    </ListItem>
+                                    <ListItem>
+                                        <ListItemIcon>
+                                            <CropOriginalIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="IMG_20160716_174348.jpg" secondary="12.8MP 3096×4128 1.6MB" />
+                                    </ListItem>
+                                    <ListItem>
+                                        <ListItemIcon>
+                                            <CameraIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="Samsung GT-I9505" secondary="ƒ/2.2 1/33 4.2mm ISO125" />
+                                    </ListItem>
+                                    <ListItem>
+                                        <ListItemIcon>
+                                            <LocationOnIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="中國广东省廣州市" secondary="概估位置" />
+                                    </ListItem>
+                                </List>
+                            </Grid>
+                        </Grid>
+                    </div>
+                </Fade>
+            </Modal>
         </div>
+        
     );
 }