added background color, backdrop

src/components/common/GlobalModel.jsx

@@ -56,6 +56,19 @@ useEffect(() => {
     [key]: dataAttributes[key],
   } ) );
   
+
+
+   // The gray background
+    const backdropStyle = {
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: 'rgba(0,0,0,0.3)',
+    };
+
+
   return (
     <div
       className={`modal fade ${ modalType }`} 
@@ -65,6 +78,7 @@ useEffect(() => {
       aria-hidden="true"
       ref={modalRef}  // Assign the ref to the modal element
       {...dataAttributesProps}
+      style={backdropStyle}
     >
       <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role} >
         <div className="modal-content">