css-dialog提示

最新推荐文章于 2021-08-04 08:06:55 发布

chunlijian1152

最新推荐文章于 2021-08-04 08:06:55 发布

阅读量393

点赞数

原文链接：https://my.oschina.net/u/3913691/blog/3068977

版权

<BackGround>
    <Dialog>
        <Hint>内容不完善内容不完善内容不完善内容不完善内容不完善</Hint>
        <OKButton>确定</OKButton>
    </Dialog>
</BackGround>

BackGround.js

import styled from 'styled-components';

const BackGround = styled.div`
    background-color: rgba(19, 21, 26, 0.6);
    opacity: 1;
    z-index: 1001;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
`;

export default BackGround;

Dialog.js

import styled from 'styled-components';

const Dialog = styled.div`
    background-color: #fff;
    width: 270px;
    height: auto;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    z-index: 1002;
    display: block;
    position: fixed;
    border-radius: 5px;
`;

export default Dialog;

Hint.js

import styled from 'styled-components';

const Hint = styled.div`
    border-bottom: 1px solid #f1f1f1;
    padding: 14px 10px;
    line-height: 1.4;
`;

export default Hint;

OKButton.js

import styled from 'styled-components';

const OKButton = styled.button`
    background-color: #fff;
    color: orange;
    border: none;
    outline: none;
    background-clip: padding-box;
    border-radius: 5px;
    width: 100%;
    padding: 10px;
`;

export default OKButton;

转载于:https://my.oschina.net/u/3913691/blog/3068977