refactor: use teleport for dialog instead of high z-index (#168)

components/modal/ModalDialog.vue

@@ -96,29 +96,31 @@ function onTransitionEnd() {
 </script>
 
 <template>
-  <div
-    v-if="isVisible"
-    class="scrollbar-hide"
-    fixed top-0 bottom-0 left-0 right-0 z-20000 overscroll-none overflow-y-scroll
-    :class="modelValue ? '' : 'pointer-events-none'"
-  >
-    <!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
-    <!-- corresponding to issue: #106, so please don't remove it. -->
+  <SafeTeleport to="#teleport-end">
     <div
-      bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
-      h="[calc(100%+0.5px)]"
-      :class="isOut ? 'opacity-0' : 'opacity-85'"
-      @click="close"
-    />
-    <div
-      ref="target"
-      bg-base border-base absolute transition-all duration-200 ease-out transform
-      :class="`${positionClass} ${transformClass}`"
-      @transitionend="onTransitionEnd"
+      v-if="isVisible"
+      class="scrollbar-hide"
+      fixed top-0 bottom-0 left-0 right-0 z-10 overscroll-none overflow-y-scroll
+      :class="modelValue ? '' : 'pointer-events-none'"
     >
-      <slot />
+      <!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
+      <!-- corresponding to issue: #106, so please don't remove it. -->
+      <div
+        bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
+        h="[calc(100%+0.5px)]"
+        :class="isOut ? 'opacity-0' : 'opacity-85'"
+        @click="close"
+      />
+      <div
+        ref="target"
+        bg-base border-base absolute transition-all duration-200 ease-out transform
+        :class="`${positionClass} ${transformClass}`"
+        @transitionend="onTransitionEnd"
+      >
+        <slot />
+      </div>
     </div>
-  </div>
+  </SafeTeleport>
 </template>
 
 <style socped>