search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.89k stars 742 forks source link

Closable data attribute for modals #904

Open dmytroderyshspd opened 4 months ago

dmytroderyshspd commented 4 months ago

Hello! The data-modal-backdrop="static" data attribute prevent the modal from closing when clicking outside of it. Could you please add the data-modal-closable attribute for a Modal which will disable closing the modal both on hitting ESC and clicking on the backdrop.

Lexachoc commented 4 months ago

@dmytroderyshspd If you remove the data-modal-backdrop attribute, you can do that. Is there a reason to use this attribute and do what you want?

dmytroderyshspd commented 4 months ago

@Lexachoc I removed the data-modal-backdrop attribute and it allowed me closing a modal both by hitting Escape and clicking on the backdrop. That's not what I would like to achive. I would like to allow closing a modal only by clicking a "Close" button with data-modal-hide attribute. It means that in my case data-modal-backdrop="static" doesn't do its job since it still allows closing a modal by hitting Escape button.

Lexachoc commented 4 months ago

Ah I see. You can play with the boolean value closable, see https://flowbite.com/docs/components/modal/#options:

Set to false to disable closing the modal on hitting ESC or clicking on the backdrop.

Or as a workaround, you can add a custom event listener for the ESC keydown to prevent it.

Or directly modify the source code: Set the closable to false as default if that's the case for everything.

Or add this data-modal-closable with value true|false in the HTML and handle it in the source code: But this is not yet implemented, PR needed.