From 9e0ca289beda516191a3c0e0af2b44aff13317a3 Mon Sep 17 00:00:00 2001
From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:31:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(modal):=20=E6=96=B0=E5=A2=9E=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89zIndex=E5=8A=9F=E8=83=BD=20(#2849)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(modal): 新增自定义zIndex功能(#2848)

* chore(modal): 生成变更记录文件

* chore(modal): 代码规范

---------

Co-authored-by: xiamiao <xiamiao@xiaomi.com>
---
 .changeset/five-ads-drum.md        | 5 +++++
 .changeset/twenty-ligers-flash.md  | 5 +++++
 packages/ui/modal/src/Modal.tsx    | 4 ++++
 packages/ui/modal/src/use-modal.ts | 4 ++++
 4 files changed, 18 insertions(+)
 create mode 100644 .changeset/five-ads-drum.md
 create mode 100644 .changeset/twenty-ligers-flash.md

diff --git a/.changeset/five-ads-drum.md b/.changeset/five-ads-drum.md
new file mode 100644
index 000000000..fa8fc37c0
--- /dev/null
+++ b/.changeset/five-ads-drum.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(modal): 新增自定义 zIndex 功能
diff --git a/.changeset/twenty-ligers-flash.md b/.changeset/twenty-ligers-flash.md
new file mode 100644
index 000000000..d3e7c8247
--- /dev/null
+++ b/.changeset/twenty-ligers-flash.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/modal": minor
+---
+
+feat: 新增自定义 zIndex 功能
diff --git a/packages/ui/modal/src/Modal.tsx b/packages/ui/modal/src/Modal.tsx
index a36456cdb..af59966fd 100644
--- a/packages/ui/modal/src/Modal.tsx
+++ b/packages/ui/modal/src/Modal.tsx
@@ -266,6 +266,10 @@ export interface ModalProps extends HiBaseHTMLProps<'div'>, UseModalProps {
    * 弹出层高度设置
    */
   height?: React.ReactText
+  /**
+   * 自定义css展示层级
+   */
+  zIndex?: number
   /**
    * 是否显示蒙层
    */
diff --git a/packages/ui/modal/src/use-modal.ts b/packages/ui/modal/src/use-modal.ts
index ce2814178..bbdfd3eea 100644
--- a/packages/ui/modal/src/use-modal.ts
+++ b/packages/ui/modal/src/use-modal.ts
@@ -158,6 +158,10 @@ export const useModal = ({
         style.display = 'none'
       }
 
+      if (Object.prototype.hasOwnProperty.call(props, 'zIndex')) {
+        style.zIndex = props.zIndex
+      }
+
       return {
         role: 'dialog',
         'aria-modal': true,