New Changes with Model with OnOpen Function

src/components/Modal.astro

@@ -7,6 +7,7 @@ interface Props {
     size?: "sm" | "md" | "lg" | "xl" | "full";
     position?: "center" | "top" | "bottom";
     closedby?: "none" | "closerequest" | "any";
+    onOpen?: () => void;
     onClose?: () => void;
     dialogClass?: string;
     triggerClass?: string;
@@ -17,6 +18,7 @@ const {
     size = "md",
     position = "center",
     open,
+    onOpen,
     onClose,
     closedby = "none",
     dialogClass = "",
@@ -75,13 +77,16 @@ const {
     }
 </style>
 
-<script type="module" is:inline define:vars={{ id, onClose }}>
+<script type="module" is:inline define:vars={{ id, onOpen, onClose }}>
     const trigger = document.getElementById(`trigger-${id}`);
     const modal = document.getElementById(`modal-${id}`);
     const close = document.getElementById(`close-${id}`);
 
     trigger?.addEventListener("click", () => {
         if (!modal.open) {
+            if (onOpen) {
+                onOpen(modal);
+            }
             modal?.showModal();
         }
     });