diff --git a/cypress/e2e/widgets.cy.js b/cypress/e2e/widgets.cy.js
index f0ca30b71b..271917889e 100644
--- a/cypress/e2e/widgets.cy.js
+++ b/cypress/e2e/widgets.cy.js
@@ -37,7 +37,7 @@ describe('After user signed in', () => {
 		it(`${widgetName} widget should get added`, () => {
 			cy.get('.mk-widget-edit').click();
 			cy.get('.mk-widget-select select').select(widgetName, { force: true });
-			cy.get('.bg._modalBg.transparent').click({ multiple: true, force: true });
+			cy.get('.data-cy-bg._modalBg.data-cy-transparent').click({ multiple: true, force: true });
 			cy.get('.mk-widget-add').click({ force: true });
 			cy.get(`.mkw-${widgetName}`).should('exist');
 		});
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 6265e637d6..ecebf9d158 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -8,7 +8,7 @@
 	:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: transparentBg && (type === 'popup') }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
+		<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
 		</div>
@@ -82,6 +82,7 @@ const type = $computed<ModalTypes>(() => {
 		return props.preferType!;
 	}
 });
+const isEnableBgTransparent = props.transparentBg && (type === 'popup');
 let transitionName = $computed((() =>
 	defaultStore.state.animation
 		? useSendAnime
@@ -271,7 +272,7 @@ onMounted(() => {
 		fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
 
 		await nextTick();
-		
+
 		align();
 	}, { immediate: true });