DesiLogi Posted August 25, 2020 Report Share Posted August 25, 2020 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); } Quote Link to comment Share on other sites More sharing options...
Nuke354 Posted August 26, 2020 Report Share Posted August 26, 2020 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? Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted August 29, 2020 Author Report Share Posted August 29, 2020 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Kurumi Posted April 8, 2022 Report Share Posted April 8, 2022 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. Quote Link to comment Share on other sites More sharing options...
ParkLoey Posted April 25, 2022 Report Share Posted April 25, 2022 Hi! Just wanted to add this answer too in case you need to pass a parameter to the modal window: Quote Link to comment Share on other sites More sharing options...
Kurumi Posted November 25, 2022 Report Share Posted November 25, 2022 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> DesiLogi 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.