Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No way to call modals without using javascript

See original GitHub issue

Every single modern frontend framework uses props in order to show modals. Literally every single one.

Why, in this newest version, are you still requiring an event to be fired in order to show modals? Why can’t we just assign a prop or a CSS class in order to show/hide a modal? Nobody uses modals this way anymore. Like explain to me how I can have a modal be visible on page load without firing a javascript event in onload? You can’t.

If there is a way of doing this and I’m wrong, go ahead and feel free to show me.

Let’s look at tailwind modals, for example: https://tailwindui.com/components/application-ui/overlays/modals

The modals in those examples use alpine props in order to show/hide. You can easily entangle these props using any other framework you want if you don’t like alpine. Like react, or vue. The syntax may differ but the concept remains consistent.

It can’t be that hard to recode the bootstrap modals so you aren’t having to modify things like the body element just to show them, especially when you can just use CSS transitions and stuff nowadays. I have absolutely no idea why bootstrap modals actually modify the body element when they are opened.

Even bulma modals don’t modify the body: https://bulma.io/documentation/components/modal/

I think this needs rethinking and recoding entirely. You could just have a data-bs-show attribute on the model container with a boolean value e.g. data-bs-show="1", or have it so the show class actually works properly without having to modify the body tag. Not to mention that a lot of the modal-related stuff in your docs doesn’t even work properly, like the full page examples.

Stuff like this is killing bootstrap. It just seems like there is no progress. All of the components still look exactly the same and it’s a bad sign when people would rather use atomic frameworks and basically write everything from scratch over and over than use this library, which used to be the best in the world. I mean I get that you’re finally ditching jquery but it seems like you’re not considering what tools people actually use nowadays. It seems like you’re just ditching jquery for the sake of ditching jquery. Nobody in their right mind wants to pollute their global space with bizarre event handlers to do things that can be done without even requiring javascript at all.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:8

Top GitHub Comments

2reactions

rohit2sharma95commented, Mar 28, 2021

Hi, @jerodion

Not to mention that a lot of the modal-related stuff in your docs doesn’t even work properly, like the full page examples.

Can you please mention what is wrong with fullscreen modal examples? 🙂

I have absolutely no idea why bootstrap modals actually modify the body element when they are opened.

There are more things to handle when the bootstrap modal is shown. Like scrolling, fixed (and sticky) elements (handling padding and margin) and focusing, etc. The body is modified to give some of these features to the user. 🙂

Your main point:

Why can’t we just assign a prop or a CSS class in order to show/hide a modal

Modal can not be shown by default without emitting any event or without JavaScript, that’s true. But then bootstrap needs to attach one more load event itself that will check for the show class to be present on the modal and then open it.

It can be considered though since a few days ago it has been done for Offcanvas component: #33382

/CC @XhmikosR and @GeoSot

1reaction

marek95commented, Mar 28, 2021

@marek95 I’m i wrong or u are talking about “Modal Backdrop” ?

yes, I am talking about the “backdrop” . sometimes this thing is called an overlay, but yea bootstrap calls this a “backdrop” .

If so i’dont see why u should be able to scroll when a Modal is shown that’d be annoying!!

yes, i agree that it would be anoying. and bootsrap developer seem to agree. they put .modal-open class on the <body>, when a modal is open https://github.com/twbs/bootstrap/blob/4c7a3e8adf73bf55a5fba5905b356468be17bc0e/scss/_modal.scss#L8

in my last comment when I said …

put your cursor over the overlay and you should be able to scroll…

… I was refering to the tailwind ui example https://tailwindui.com/components/application-ui/overlays/modals

I think you would run into this “body scroll” problem when using the tailwind ui example … But I dont know for sure, because the tailwind example is in a wierd iframe thing… so i was telling @jerodion what to do so he can test it himself