Confirm Leave on External Links in Wordpress

Question

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

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

Answer 2

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

• Open external link in new window and track outbound click event
• JQuery confirm dialog
• WordPress, jQuery UI CSS Files?
• Are there hosted jQuery UI themes anywhere?
• Why jQuery UI 1.10 remove jquery dialog zIndex option?

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 
}