自定义弹框

自定义弹框实现

import styles from './index.scss'
const customModal = (props) => {
  const { showModal, setShowModal } = props
  return (
   <>
    {
     showModal && (
       <div className={styles['custom-modal']}>
          {/* 遮罩层 */}
         <div className={styles['modal-overlay']} onClick={() => { setShowModal (false)}}></div>
          {/* 内容 */}
          <div className={styles['modal-content']}>
            <div className={styles['content']}>
            </div>
              {/* 底部按钮 */}
              <div className={styles['modal-btn']}>
                  <Button
                    style={{ width: '40%'}}
                    size="small"
                    onClick={handleClear}
                  >
                    重写
                  </Button>
                )}
                <Button
                  style={{ width:'40%'}}
                  size="small"
                  type="primary"
                  onClick={handleSave}
                >
                  确认
                </Button>
              </div>
          </div>
       </div>
      )
    }
   </>
  )
}

/* 弹框动画 */
@keyframes fadeIn {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.custom-modal {
  .modal-overlay {
	  position: fixed;
	  top:0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0, 0, 0, 0.5);
	}
  .modal-content {
    position: fixed;
    z-index: 99;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 80%;
    padding: 12px 8px;
    transform: translate(-50%, -50%) scale(0);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    animation: fadeIn 0.5s forwards;
    display: flex;
    flex-direction: column;
    .content {
      flex: 1;
      ovverflow: auto;
     }
    .modal-btn {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }
  }
}