How do I code a JavaScript pop up window

[xarzu]

What is the best and easiest way to have a modal window pop up in JavaScript code?  I have a function in JavaScript where I would like to put a modal pop up window code in so what I know it is being hit.  I did a search engine search on the internet for examples of this but everything I found was accompanied with HTML and CSS code.  That is not what I am looking form.  Please advise.

[Franchiser]

On 2/22/2018 at 7:28 AM, xarzu said:

What is the best and easiest way to have a modal window pop up in JavaScript code?  I have a function in JavaScript where I would like to put a modal pop up window code in so what I know it is being hit.  I did a search engine search on the internet for examples of this but everything I found was accompanied with HTML and CSS code.  That is not what I am looking form.  Please advise.

Hi Xarzu,

Try this code:

<script type="text/javascript">
// Popup window code
function newPopup(url) {
 popupWindow = window.open(
  url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<p><a href="JavaScript:newPopup('https:www.thenameofthepage.com');">Pop Up Window</a></p>
 

You may play around with the width and height of the popup window based on your desired display.

regards,

Franchiser

[MayMusic]

Refer to this article: https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-generate-link-menus-and-popup-windows/

[alineer]

Do you want a modal or a popup? You can easily make a modal menu with HTML5 and CSS. However, I have noticed that Caspio forms do not play too nicely with modal windows. I had to do some hacky things to get them to work.  If you would like more information, I will be happy help.

[SSDG1]

On 3/8/2018 at 10:55 AM, alineer said:

Do you want a modal or a popup? You can easily make a modal menu with HTML5 and CSS. However, I have noticed that Caspio forms do not play too nicely with modal windows. I had to do some hacky things to get them to work.  If you would like more information, I will be happy help.

Hi there,  I have been trying to get modals to work and you are correct the forms do not play nicely.  If you have a solution I would appreciate it.  thank you.

[cheonsa]

Hello!

Just wanted to share with you this new video from Caspio wherein they illustrate how to use modal in your applications:

 

[PotatoMato]

Hi! Just to add, you may also check this post: 

 

[Queso]

Hello, 

To create the modal pop-up window on my DataPage, I utilize their 'Generator'. JS seems to be not needed in this case. Here is the link of their generator.

It can also load the URL on the same page or another page.  It's a very big help because it generates the  HTML code for you.

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

 

[GoodBoy]

H! Caspio already has an article on implementing modal in a DataPage. 

 

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

[GoodBoy]

On 11/25/2022 at 2:27 PM, Meekeee said:

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>

 

In addition to this issue, there is another potential issue that you may encounter when having a modal in results page, where some of the fields in your form (i.e. bulk update) will be disabled. Here is a solution for that.

 

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