Modal is not closing!

I have a layout. It has two pages. I can redirect into both pages internally.
Now, In one page I am opening a modal. It works fine. But when I redirect back to my previous page, using the back controls of the device (Back button of browser and in mobile) the modal content disappears but the modal background remain over the content. This content is removable with any controls. My only choice is to refresh the page.

FYI: This error is in single page applicant pages.

Can it be solved ?

1 Like

have this problem as well…

This is a known limitation of Bootstrap modals & Single Page Apps. At least known to me :wink:

I have found JS to be the only solution. Bind to the navigation events or call a JS function on evey content page using an auto-run flow:

$('.modal-backdrop').remove();

Thank you, indeed it seems to be a coonu bug on bootstrap, on reflection, instead of displaying the modal when the visitor is not logged in, the modal should be closed if he is logged in. but in the options I only have show I did not close
an idea?

Regarding your proposal, I don’t know how to integrate it into my page, if you have an example I would like to, thank you again

This sounds like you are trying to create a modal a little like twitter where you visit a url, and then if not logged in you get a modal popup telling you to login if im getting your idea right here you aren’t navigating pages?

How are you showing and hiding this modal are you using the show dynamic attribute or the modal show dynamic attribute?

I think the issue here might be using the hide attribute as it only effects the modal element and the backdrop is actually separate id try either:

using modal show:

! at the front will make it be if there’s no identity

Or depending how you return the id you could try on the server connect adding a dynamic event for unauthorised then show the modal or using a page flow depends on the server connect responses you return

yes, but my concern is there, I don’t know how to tell him that the identifier does not exist

In code view on the bind menu try just add ! at the very front

Edit this is assuming your current bind is a identity step in the server action maybe post a screen shot of the action you are using also so I can see what’s in there

Here’s a example of what id do the modal show method would also work but there would be more of a flashing effect as things load so here’s what id do:

In the server action have an identity step:

On the server connect returning the data add a success event:

Press the inline flow button the second orange button with 3 boxes:

In the flow add a condition:

Set the condition to check when the identity step is null:

Add a run step:

In the run use the events to show the modal

This way the modal won’t flash as the server connect is loading you can use modal show but it may create a flashing effect also make sure you turn off auto show on the modal as it will show when the identity is checked with this