Pass parameters to a Bootstrap modal window

[VincenzoCocciolo]

Hi everyone

I made some experiment but didn't fine a way to show a Bootstrap modal windows with some parameters from the calling page passed.

No problem in showing the modal window (except for the responsivness but I'll address later)

 

 

But any parameter passed to the URL in the HTML Block of the calling page is not received.

Is there a best practice on this?

On the other end is there a way to use Session parameter or a more Javascript method ?

Regards

 

 

 

[DanGViper1122]

Just saw this in passing; there's a neat little Bootstrap trick that might be able to do this for you.  Under this section:

https://getbootstrap.com/docs/5.0/components/modal/#varying-modal-content

Note how the 'data-bs-whatever' becomes the ID (or [@field:ID] for example].  If you replace that with the data source ID in your datapage, then use the javascript they recommend there to carry the "recipient" over to the modal, you can potentially carry that single parameter over.  How to pass others might require an extension of the script they provided.  Let me know if this makes sense.   

[Kurumi]

Hi! I would like to share this helpful video from Caspio Labs about using modal in DataPages:

 

Check the description to download the files needed.

[ParkLoey]

Hi! Just wanted to add this answer too:

 

[GoodBoy]

Hi guys! They already have a helpful documentation on how to implement modal in our DataPages.

- https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/open-details-datapages-in-a-lightbox/

[Kurumi]

Hi! Just an update - if you have a modal that is showing behind the Results Page, you can use this code in the Header:

<style>

.modal {
 z-index: 9999 !important;
}

</style>

In addition, if you would like to automatically adjust the size of the modal based on its content. You can use this code in the Header as well:

<style>

body .modal-dialog { /* Width */
max-width: 50%;
width: auto !important;
}

</style>