Open new url as modal popup with overlay from button

[DesiLogi]

Hopefully someone can look at this particular scenario and show how to open the popup in modal with an overlay background. 

A couple issues: I cannot use an iframe for the popup content (passing parameters to a Caspio datapage, which doesn't work smoothly via iframe). Nor can I use a div for the content (because it's an entirely different datapage) that's in the same datapage as the button that creates the popup.

So I need to open an entirely new url in a window, as a popup. The new url (web page) will have a datapage embedded.

The code below does this fine but I also need it to make the popup modal (with an overlay background around it, if possible). Does anyone know how to tweak this code to make the new window popup modal? Thanks for any help!

Here's the button that is in an html block in a tabular datapage: 

<button class="btnew" type="button" onclick=" edititem('https://edit-item?ItemID=[@field:ItemID]', 'web', 1200, 900);"><span><i class="fa fa-pencil" aria-hidden="true"></i> Edit</span></button>

And here is the js that is in the same html block that creates the actual popup with the relevant web page. This works well, I just need to make the popup modal. 

  function edititem(myURL, title, myWidth, myHeight) {

            var left = (screen.width - myWidth) / 2;

            var top = (screen.height - myHeight) / 4;

            var myWindow = window.open(myURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + myWidth + ', height=' + myHeight + ', top=' + top + ', left=' + left);

         }

 

[Nuke354]

You may want to check this stackoverflow post: https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal

Are you also deploying this in your HTML page where your DataPages are deployed?

[DesiLogi]

Hi Nuke,

I can't use code that has the modal content (like in a div) on the same page as the link I'm executing the modal opening from. This is because that modal will have a separate datapage and I cannot "store it" (meaning it loads) on the  page that has the link that executes it opening (because that link is in another datapage). It would significantly slow usability to have the modal datapage loading whether it's needed or not- that's why I wanted to open it (anew) in a popup. The pages are all on the same domain.

That said, thanks for the link to the SO post. I 'd ended up figuring out how to pass the parameters to a datapage in an iframe. You have to send the parameters to the host page and then get the host page's full structure to pass it to the iframe.  This is what I ended up using in the host page to do this.

I was hoping to find a nice simple way to open a popup in modal without going through the host/iframe method, if possible. 

<script>

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
    var params = window.location.search;

    document.getElementById('ifr').src = '../item-new2' + params;

});

</script>

<div class="col-md-12">
<iframe id="ifr" frameborder='0' style="overflow-x:hidden;overflow=y:hidden;text-align:left;height:900px;width:100%;background:#F9FAF7""></iframe>
</div>

 

Edited August 29, 2020 by DesiLogi

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

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