[Day 15] Dialog 弹跳视窗

在需要提示，或是小分页显示时

通常我们会选择 Dialog 弹跳视窗

这边的使用背景是在D14时，如果商品有任何问题，我们可以在点选问号时给予他一个弹窗

首先先写触发的函式
以及关闭的函示

 const handleClose = () => {
    setOpen(false);
  };
   const Open = () => {
    setOpen(Open);
  };

接着再套用元件
open 将你要open的动作写入
onClose 是点选黑背景做的事 通常也是点选关闭
fullWidth 可以设定其宽度

      <Dialog
        open={Open}
        keepMounted
        onClose={handleClose}
        fullWidth={true}
        maxWidth="md"
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
         盒子资讯
        </DialogTitle>

        <Divider style={{backgroundColor:"#707070"}} ></Divider>
        <DialogContent>
          <Box style={{ fontSize: "22px", margin: "0 5%" }}>
          这盒子是方形的
          </Box>
        </DialogContent>

      </Dialog>

D15