Showing a modal in the BSS workspace doesn't show it in browser preview

Ideas
1

Maybe I’m mistaken, but I thought in earlier versions of the program that when you showed a modal in the program using the “Show”/“Hide” menu buttons, and then previewed the website in a browser, the modal would be open in the preview?

It’s not a huge issue to just add a button to the page to trigger the modal, but I seem to remember that it used to show automatically if it was open in the BSS workspace.

2

if you are talking about this area

image
image754×913 29.2 KB

then you need o either double click the modal component in the overview
image
or click the modal component and see this in the first picture
image
you can click hide or show
image
image639×873 25.5 KB

i clicked show so the modal was displayed

3

No, you misunderstood my question. I know how to display the modal component in the program.

I’m wondering why, when when the modal is open/displayed in BSS, if you preview the website in a web browser, you don’t see the modal? The only way you can see it in a web browser preview is by adding a button to the site that will open the modal, so you can click it in your previewed website to display the modal. We should be able to see the open modal in the browser preview if it’s being shown in the BSS workspace.

4

If you want a modal to be open on page load add this to a js-file

new bootstrap.Modal('#ID-OF-THE-MODAL').show()
5

Thanks. I was actually using a jQuery script to do the same, but vanilla JS is even better.

But don’t you think it should show up in the browser preview if it’s set to show in the BSS workspace? I mean, in terms of workflow, it should be the same as showing an open dropdown, or collapse, or accordion item, right?

6

The modal’s Show/Hide buttons have always worked only within the app. Dropdowns are the only component whose expanded/visible state is persisted, so it can be viewed outside the program. This is because they have an official way to be made visible with CSS only, which allowed us to make the Expanded option. The show/hide buttons make use of it as well.

In contrast there is no official way to make modals and toasts visible by default without resorting to JavaScript. Even if we generated JS and added it to the page in order to have these components visible on page load, browsers with JS disabled would not show them. As a result we don’t persist the visibility as an option and it is not exported/previewed outside the program.

1 Like
7

Thanks for the clarification, Martin.