JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<a href="http://www.google.com" class="external">Google</a>

JavaScript

( function( global )
{
    var $ = global.jQuery;

    $( function()
    {
        var styledConfirm = global.styledConfirm = function( message, okFunc, cancelFunc )
        {
            if( typeof message !== 'string' )
            {
                message = 'Please confirm';
            }

            $( '<div/>' )
                .text( message )
                .dialog( {
                    buttons: {
                        Ok: function()
                        {
                            if( typeof okFunc === 'function' )
                            {
                                okFunc();
                            }

                            $( this ).dialog( 'close' );
                        },
                        Cancel: function()
                        {
                            if( typeof cancelFunc === 'function' )
                            {
                                cancelFunc();
                            }

                            $( this ).dialog( 'close' );
                        }
                    },
                    close: function()
                    {
                        $( this ).dialog( 'destroy' ).remove();
                    },
                    draggable: false,
                    modal: true,
                    resizeable: false,
                    title: 'Please Confirm'
                } );
        };
    } );
}( window ) );

$( function()
{
    $( 'a.external' ).click( function( e )
    {
        $link = $( this );

        styledConfirm(
            'This link is external. Are you sure you wish to continue?',
            function()
            {
                window.open( $link.attr( 'href' ) );
            }
        );

        e.preventDefault();
    } );
} );