Datapages In Modal Css Framework

[jhanajc]

Hi,

 

It would be really great to successfully publish datapages in modal blocks  (dialog box / popup windows). 

 

While experiencing some success at displaying datapages in modals, I can see there are some problems:

 

1. The entire page refreshes on loading the modal for the first time. Not really a show stopper but something to be mindful of because you see a blank white moment during reload.

 

2. In a web form datapage, if field validation on submission fails, the page does not return to the modal even when configured to do so via a modal url link. (the popup disappears).

 

3. Javascript in a page within a modal doesn't run as expected or doesn't seem to trigger at all.

 

 

Any ideas?

 

JC

[LWSChad]

I have modal type behavior in iframes.

 

You can see it in action to see if it's what you're after.

http://eziq.us/plan-free

[Geekless]

Find any solution to this?

[alineer]

On 3/18/2016 at 12:09 PM, ezIQchad said:

I have modal type behavior in iframes.

 

You can see it in action to see if it's what you're after.

http://eziq.us/plan-free

This link is dead. Do you have another one showing the behavior?

[LWSChad]

This behavior is displayed in many places my web-application. Create an account here

Choose a free plan so you can log in to see this and other things Caspio

[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 in case you need to pass a parameter to the modal window:

[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/

[Corpcatalog]

I am having problems with a modal I put into a tabular report that is embedded into weebly site.

Without the modal code in the tab report, it renders 100% width, no scrolling

With the modal code as given in the above video tutorial, it renders at about 50% width, not responsive and scrolles vertically.

How does the linked Modal CSS interfere with the Weebly theme and Caspio CSS?

Page works perfectly in preview mode inside caspio.

[Corpcatalog]

Also noticed the colour of my menus has changed with the modal code 

[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>

 

[Kurumi]

Hello - In addition to the previous post, if you have a modal and Form Elements that are not showing such as AutoComplete, Dropdowns, and Date Pickers, you can use a custom CSS to show these elements in front of the modal.

Insert this code in the Header of the DataPage.

<style>

.modal-backdrop{
z-index:4 !important;
}
.modal {
z-index: 5 !important;
}
.header-navbar{
z-index: 3 !important;
}

</style> 

 

[Kurumi]

Hi - Here's another workaround for light boxes:  https://www.humaan.com/modaal/

Modaal is a dialog window plugin that you can also use as another window/popup window on your page.
- https://www.jsdelivr.com/package/npm/modaal
- https://github.com/humaan/Modaal