src/components/common/GlobalModel.jsx

@@ -68,6 +68,21 @@ useEffect(() => {
       backgroundColor: 'rgba(0,0,0,0.3)',
     };
 
+const getPositionClass = (type) => {
+  switch (type) {
+    case 'top':
+      return 'mt-3';
+    case 'bottom':
+      return 'mt-auto mb-0 d-flex flex-column';
+    case 'left':
+      return 'position-absolute top-50 start-0 translate-middle-y me-auto';
+    case 'right':
+      return 'position-absolute top-50 end-0 translate-middle-y ms-auto';
+    case 'center':
+    default:
+      return 'modal-dialog-centered';
+  }
+};
 
   return (
     <div
@@ -80,7 +95,7 @@ useEffect(() => {
       {...dataAttributesProps}
       style={backdropStyle}
     >
-      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role} >
+      <div   className={`modal-dialog ${modalSizeClass} ${getPositionClass(modalType)} ${dialogClass} mx-sm-auto mx-1`} role={role}>
         <div className="modal-content">
           <div className="modal-header p-0">
             {/* Close button inside the modal header */}