import { message } from '../dist/message.js'
import { DialogModal } from '@kevisual/system-ui'
import '@kevisual/system-ui/dist/index.css'

# Modal

> 使用原生js实现的弹窗组件

安装 `npm i @kevisual/system-ui`


export const ShowModal = () => {
  const url = 'https://kevisual.xiongxiao.me/system/ui/index.js'

  const onClick = async () => {
    console.log('theme', DialogModal)
    // console.log('clicked')
    // message.info('Hello, this is a message')
    const content = document.createElement('div');
    content.innerHTML = `
    <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
      <h2 class="text-2xl font-bold mb-4">Token 无效</h2>
      <p class="mb-6">您的登录凭证已失效，请重新登录。</p>
      <a href="/user/login" class="inline-block bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-200">确定</a>
    </div>
`;
    const modal = DialogModal.render(content, {
      id: 'redirect-to-login',
      contentStyle: {
        width: 'unset',
      },
      dialogTitleStyle: {
        display: 'none',
        padding: '0',
      },
      dialogContentStyle: {
        padding: '0',
      },
      mask: true,
      open: false,
    });
    modal.setOpen(true)
  }
  return <div onClick={onClick}>点击显示弹窗</div>
}

<ShowModal />

*使用方法*

```js
// import { DialogModal, loadCss } from 'https://kevisual.xiongxiao.me/system/ui/index.js'
// loadCss('https://kevisual.xiongxiao.me/system/ui/index.css')

import { DialogModal } from '@kevisual/system-ui';
import '@kevisual/system-ui/dist/index.css';

const content = document.createElement('div');
content.innerHTML = `
    <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
      <h2 class="text-2xl font-bold mb-4">Token 无效</h2>
      <p class="mb-6">您的登录凭证已失效，请重新登录。</p>
      <a href="/user/login" class="inline-block bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-200">确定</a>
    </div>
`;
export const modal = DialogModal.render(content, {
  id: 'redirect-to-login',
  contentStyle: {
    width: 'unset',
  },
  dialogTitleStyle: {
    display: 'none',
    padding: '0',
  },
  dialogContentStyle: {
    padding: '0',
  },
  mask: true,
  open: false,
});

```

类型
```typescript
export type ModalOpts<
  T = {
    [key: string]: any;
  },
  U = {
    [key: string]: any;
  },
> = {
  root?: HTMLDivElement | string;
  id?: string;
  mask?: boolean;
  maskClassName?: string;
  maskStyle?: ElStyle;
  maskClose?: boolean;

  contentClassName?: string;
  contentStyle?: ElStyle;
  destroyOnClose?: boolean; // 关闭，把Element移动到cacheFragment中
  hideOnClose?: boolean; // 关闭后是否销毁，设置display:none
  open?: boolean;

  onClose?: () => void;
  defaultStyle?: DefaultStyle<U>;
} & T;
export type DefaultStyle<T> = {
  defaultContentStyle?: ObjCss;
  defaultMaskStyle?: ObjCss;
} & T;

type DialogModalOpts = {
  dialogTitle?: string;
  dialogTitleClassName?: string;
  dialogTitleStyle?: ElStyle;
  dialogTitleEl?: HTMLElement;
  dialogTitleCloseIcon?: boolean;

  dialogContentClassName?: string;
  dialogContentStyle?: ElStyle;

  dialogFooterClassName?: string;
  dialogFooterStyle?: ElStyle;
} & ModalOpts<KV, DialogDefaultStyle>;

type DialogDefaultStyle = {
  defaultDialogTitleStyle?: ObjCss;
  defaultDialogContentStyle?: ObjCss;
  defaultDialogFooterStyle?: ObjCss;
};


```