Jump to content

Open new url as modal popup with overlay from button

Recommended Posts

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);



Link to comment
Share on other sites

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. 


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

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



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


Edited by DesiLogi
Link to comment
Share on other sites

  • 1 year later...
  • 3 weeks later...
  • 7 months later...

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


.modal {
 z-index: 9999 !important;


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:


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



Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...