It would be nice if you add the functionality to the link button to open the linked page in a pop-up.
3 Likes
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.
you can do this with javascript hack.
add css class “popup-link-btn” in linkButton
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">×</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
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
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
@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?
1 Like