Modal not showing 5.7

modal not showing after update 5.7
but no problem on 4.6

Imac OS mojave preview on firefox

Ahhh… you didn’t say it was in the preview.

When I preview in Chrome and Firefox, I also see no modal, however the modal does show up when triggered by a button, so the modal still works. The issue would seem to be limited to it not showing in the preview browser when one displays it via the show button in the BSS top menu.

It would appear this bug is confirmed.

Have you reported via the bug report page? That’s usually best, because I don’t think the devs check the forums every day.

(Funny how these things always seem to be discovered on weekends, when the BSS devs are off, so it won’t get attention until Monday.)

Update: the issue also seems to be affecting the mobile navbar menu. When opened via the program menu, it’s visible in the program workspace, but not in the browser preview.

I make a button to open the modal when i click the button modal not showing on preview . The only way i can do is did it in B4 and then convert them to B5 . sorry for my eng.

This I cannot confirm. I just made a website in Bootstrap 4.6 added a button and modal and it seems to work.

Did you give make sure to give your modal an ID, and set your button attributes correctly?

data-toggle=“modal”
data-target="#yourModal"
(where #yourModal is the ID you gave your modal)

yes, everything is correctly.

Strange. I have set it up identically to yours, and my modal works. I do see you’re using an older version of jquery (3.5.1)

Try switching to the latest version of jquery (3.6.0) and see if that works.

i switching to jquery (3.6.0) it still not works
and thank for your help

if you use Bootstrap 5 then the key in the data attribute is data-bs-toggle and data-bs-target

1 Like

@kuligaposten Thanks for that info. Though I’ve yet to build a new website using Bootstrap 5, I suspect I would probably have been pulling out my hair for awhile trying to figure out why the modal wasn’t triggering. I have yet to have the time to read all the official changes between BS4 and BS5. It’s kind of annoying that the Bootstrap developers would make such a trivial change to something we’ve been used to doing the same way for years, but I suppose they had some logical reason for this.

In any event, the preview bug exists regardless of whether the website is built using Bootstrap 4 or Bootstrap 5, but the modal is working in Bootstrap 5 when the proper data attributes are used, as shown in the screengrab below. And the bug also still prevent the mobile nav from showing in the preview in Bootstrap 5.

Yes, it works thank for the tip
Screen Shot 2021-06-21 at 10.48.52 AM

2 Likes

I have to mention that opening modals/collapsed navbars with the “Open” button in Bootstrap Studio is not supposed to make them show up in the browser preview.

Maybe the cause of the confusion is that this is opposite to how it works with Dropdowns. Dropdowns already have an official Expanded setting which the “Open” button uses. However no such setting exists for modals.

We should think of a way to make these “Open” buttons consistent.

It always did in past versions of BSS. Shouldn’t the browser preview reflect the state of the website as it exists in the Bootstrap Studio workspace as closely as possible? Of course it’s not a big deal to click the hamburger menu to open the navigation bar, but with a modal, the only way see it open in the browser preview would be to configure a trigger first. It’s also a handy reminder when building the website to make sure to close the modal or mobile menu before uploading the website.

1 Like

No need for a trigger, the new custom options do it for you, Have a look
https://kuligaposten.com/bss/modal-preview.mp4

1 Like

Interesting. I have not had a chance yet to explore the custom options, but your video would seem to prove that they can do what the program used to do.

It really doesn’t matter that much to me, as long as I can see the open modal and mobile menu in the BSS workspace. I don’t necessarily care if the browser preview is a perfect match because there are plenty of things you cannot see in the browser preview that you can have on a website page.

I just l find it odd that this was present in older versions of BSS (even if it was unintentional,) and now it’s not.

Great example, thanks for video.

1 Like