'Confirm Leave on External Links in Wordpress

Here's the situation:

  • This is a bank website, so when a user clicks an external link (perhaps to a Facebook page or a partner website), there needs to be a box that says "You are about to leave this page, none of this content is managed by...etc.".

  • The user should then be able to click 'confirm' to open the external link in a new window or click 'cancel' to be taken back to the website and a box saying "you have chosen not to leave the site".

This site is in Wordpress, so I'm looking for an easy way to handle this without having to add custom Javascript to every link.

They actually have it working on their existing site: http://clearmountainbank.com/ and I can make it work on the new site by adding a confirm_entry script to the header and adding custom Javascript to each link but I can't get the links to open in a new window.

This way is also time-consuming as I have to manually edit every external link. Would there be any easy way to recognize external links and add this functionality throughout the site and if not, what can I do to make it open in a new window?

Here's the code I'm using:

    <script type="text/javascript">
        <!--
            function confirm_entry(varible_value)
            {
            input_box=confirm("Link Disclaimer:  Bank Name  provides links to web pages which are not part of the Bank Name website or clearmountainbank.com or online.bankname.com domains. These sites are not under Bank Name control, and Clear Mountain Bank is not responsible for the information or links you may find there. Bank Name is providing these links only as a convenience. The presence of these links on any Bank Name website is not intended to imply Bank Name endorsement of that site, but to provide a convenient link to relevant sites which are managed by other organizations, companies, or individuals.");
            if (input_box==true)

            { 
            window.location.href=varible_value; 
            }

            else
            {
            // Output when Cancel is clicked
            alert ("You have opted not to leave Bank's website.");
            }

            }
        -->
    </script>
javascriptphpjqueryhtmlwordpress


Solution 1:[1]

Here's one way you could do it (See JSFiddle):

$("a").on("click", function() {
    if($(this).attr("href").indexOf("http://") == 0) {
        return confirm("Super long message");
    }
});
  • This would only work for http:// and not https://, it also doesn't check whether the absolute link points to your current domain, but it gives you and idea of how to approach it.

Solution 2:[2]

I couldn't get confirm() to work. But, thanks to the following Q&A's, I've made an alternative:

You can apply the code in the theme's functions.php, but it's better to make a plugin for that. 

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_so_22382151' );
add_action( 'wp_header', 'print_header_so_22382151' );
add_action( 'wp_footer', 'print_footer_so_22382151' );

/**
 * Enqueue jQuery Dialog and its dependencies
 * Enqueue jQuery UI theme from Google CDN
 */
function enqueue_scripts_so_22382151() {
    wp_enqueue_script( 'jquery-ui-dialog', false, array('jquery-ui','jquery') );
    wp_enqueue_style( 'jquery-ui-cdn', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dot-luv/jquery-ui.min.css' );
}    


/**
 * Print Dialog custom style
 */
function print_header_so_22382151() { 
    ?>
    <style>
        /* A class used by the jQuery UI CSS framework for their dialogs. */
        .ui-front {
            z-index:1000000 !important; /* The default is 100. !important overrides the default. */
        }
        .ui-widget-overlay {
            opacity: .8;
        }
    </style>
    <?php
}

/**
 * Print Dialog script
 */
function print_footer_so_22382151() { 
    $current_domain = $_SERVER['SERVER_NAME'];
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
          $('a[href^="http://"],a[href^="https://"]')
            .not('[href*="<?php echo $current_domain; ?>"]')
            .click(function(e) {
                e.preventDefault();
                var url = this.href;
                $('<div></div>').appendTo('body')
                    .html('<div><h6>Link Disclaimer:  [...].</h6></div>')
                    .dialog({
                        modal: true, title: 'message', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                window.open(url);
                                $(this).dialog("close");
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
            })
        });
    </script>
    <?php 
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ian Clark
Solution 2 Community

Related Questions