Link buttons to open-up in a popup

Ideas & Product Feedback
1

It would be nice if you add the functionality to the link button to open the linked page in a pop-up.

image

3 Likes
2

I was just about to post something about this and would like to add to it. Please also allow the ability to choose subpages for links as well across the board.

3

@Moe @tim.young

Status of this request, is it in the roadmap and if yes, when can it be expected?

4

you can do this with javascript hack.

5

@christopher93 You have some code you may want to share?

6

add css class “popup-link-btn” in linkButton

image
image1049Ă—495 28.6 KB

Add HTML component on page and paste this code.

<div id="linkPopup" class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
             <iframe id="newIframe" width="100%" height="650px" frameborder="0"></iframe>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Paste this JS code in Javascript

$(document).ready(function(){
    $("body").find(".popup-link-btn").each(function(){
        $(this).unbind("click").on("click", function(event){
            event.preventDefault();
            event.stopPropagation();
            let src = location.origin + location.pathname + $(this).attr("href");
            console.log(src)
            $('#newIframe').attr('src', src);
            $("#linkPopup").modal()
            return false;
        });
    });
});
3 Likes
7

Thanks @christopher93

Just FYI, when I tested I had to change this line:

to:

let src = location.origin + $(this).attr("href");

To get this to work.

Also, works best if this other page is not inside a layout, otherwise you’ll have the menu and layout settings applied again.

1 Like
8

on my side this line

let src = location.origin + $(this).attr("href");

create this kind of URL which is incorrect.
https://abc.tadabase.io#!/toogle-switch

1 Like
9

@moe can you help me understand why we can’t just add a class or tag to the link or button that we want to open in a popup to use the built in popup functions already in the app?

For testing I added a button to a page via the html component. I then used jQuery wrap() to add the link to the button. It worked fine for opening to a new page. I wanted to see if I could just add an attribute to this to make it open in a popup (and not have to used an iframe etc).

I looked at links that open in popups in both tables and menus. Adding a button and column that did not open in a popup and one that did. I compared the html. I took what appeared to be the required html and added it to my html component button. Still just opened in a new page. I then tried to make the button and column that were not set to open in popups open in popups via adjusting their html to match that of the popup versions. They just continued to open in new pages too. I’m found I could strip away almost all of the html from the popup opening versions and still get them to work if I had already opened a popup with them first. BUT if I would load the page, make the same html changes, then try to open the popup it would just open in a new page.

Therefore it seems like there is something that is applied as the page loads and when the button/link is first fired that is able to reference the linked no matter the tag, class, and attribute changes made after the first time it is open. And after the page is loaded a tag, class, or attribute cannot be added to make a link/button open in a popup. Is this correct?

Is there a simple change I can make to a link during the page load that will change it to open in a popup?

2 Likes
10

Thanks everyone who contributed here ( @moe @christopher93 ) - worked for me!!