Link Button Pop-up

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

Here are a few steps to view a linked page as a pop-up.



First, in your builder, you will click the Link Button component to add the CSS Class of "popup-link-btn."




Next, Add an HTML Component to your page. Click on Source Code within the HTML Component and add the following 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>

Additionally, add the following code to your page's JavaScript tab.

$(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;
        });
    });
});

Original Community Post:

https://community.tadabase.io/t/link-buttons-to-open-up-in-a-popup/1605/6