Remove backdrop from Modal component to enable click on background elements?

[J4v4Scr1pt]

Hello!

I'm trying to create a banner component using the Modal.
Everything works fine, but I dont want the banner to disable clicking on other parts of the page. I have tried with pointer-events-none but then you cant click inside of the banner.

Is there a way to remove the backdrop?

This is my banner code:

'use client';

import { Modal, ModalBody, ModalContent } from '@nextui-org/modal';

type BannerProps = {
	isOpen: boolean;
	onOpenChange: () => void;
	bodyContent: React.ReactNode;
};

export const Banner = ({ isOpen, onOpenChange, bodyContent }: BannerProps) => {
	return (
		<Modal
			backdrop="transparent"
			classNames={{
				base: 'justify-start sm:m-0 p-0, m-0 w-dvw max-w-full max-h-40 min-h-16',
				wrapper: [
					'fixed',
					'top-0',
					'left-0',
					'right-0',
					'bottom-1',
					'items-end',
					'sm:items-end',
					'[--scale-enter:100%]',
					'[--scale-exit:100%]',
					'[--opacity-enter:100%]',
					'[--opacity-exit:0%]',
					'[--slide-y-enter:0px]',
					'[--slide-y-exit:200px]',
					'[--slide-x-enter:0px]',
					'[--slide-x-exit:0px]',
					'sm:[--scale-enter:100%]',
					'sm:[--scale-exit:100%]',
					'justify-bottom',
				],
				body: 'p-0',
				closeButton: 'z-50 top-0 right-4 bottom-0 h-fit my-auto',
				backdrop: 'pointer-events-none',
			}}
			isOpen={isOpen}
			motionProps={{
				variants: {
					enter: {
						x: 'var(--slide-x-enter)',
						opacity: 'var(--opacity-enter)',
						scale: 'var(--scale-enter)',
						y: 'var(--slide-y-enter)',
						transition: {
							duration: 0.3,
							ease: 'easeOut',
						},
					},
					exit: {
						x: 'var(--slide-x-exit)',
						opacity: 'var(--opacity-exit)',
						scale: 'var(--scale-exit)',
						y: 'var(--slide-y-exit)',
						transition: {
							duration: 0.2,
							ease: 'easeIn',
						},
					},
				},
			}}
			radius="none"
			scrollBehavior="inside"
			isDismissable={false}
			isKeyboardDismissDisabled={true}
			onOpenChange={onOpenChange}>
			<ModalContent>
				<ModalBody className="flex items-center justify-center py-2 pl-6 pr-12">
					{bodyContent}
				</ModalBody>
			</ModalContent>
		</Modal>
	);
};

[alphaxek]

Hi @J4v4Scr1pt , not sure if its the correct way to do it but the workaround is related to the z-index, Model opens in z-index 50 (tv prop z-50), and background layer of Model covers the whole page with same z-index making other background components unclickable/un-interactable, whenever you try to interact with other background components you won't be able to because there is another layer sitting on top of it with z-50 covering whole page, so you will be clicking on that layer instead of background components, making it un-interactable.

If this helps, please mark this as answered, will appreciate, thanks!

[J4v4Scr1pt]

Thx for pointing me in the right direction :). I did try putting z-0 on the wrapper because of the layer. But that did not help. Droped that idea. But now you pointing to that again I put it to -z-[1] and that did the trick.

[alphaxek]

great! thanks!

[J4v4Scr1pt]

I just wanted to add some info. We started to use this component with -z-[1] but because of this it showed behind all content. My inital testing was in StoryBook and for some reason it works there...

The modal is built with a wrapper that covers the page and put modalBody to its desierd place.
I modified it to put it in the bottom with fixed and made the wrapper fit the modalBody.. but then you cant scroll because of some reason. This modifications to the modal start to get to complex and weird.. and it still dont work to 100%.

We will instead build our own banner using FramerMotion and hope that NextUI releases a banner component some time in the future :)

Keep up the awesome work you are doing!

[alphaxek]

Hi @J4v4Scr1pt, thank you so much for you feedback.
yeah true, changing z-index manually makes it more and more complicated for other components and layers, I agree not the ideal way to do it because we are not using the component the way it supposed to be used. may be can you explain what exactly you are looking for so that we look for appropriate component for your usage.

[J4v4Scr1pt]

Thanks man!

We want to display a Cookie Banner at the bottom that shows some text about our cookies. This banner will contain the text and two buttons, one for just accepting the cookies and another to show the cookie settings. The Banner should show be shown above the page conent at the bottom. But the user should still be able to interact with the page. A11y tools should be able to move in and out of the Banner. A quite standard thing.

We have bought Pro and I know from the roadmap that a Cookie consent is planed. But we need one now. Thats why we will create a temp one that we will change to the one NextUI will create later :).

Example pic: