JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://www.stackoverflow.com" class="external">the bible</a>

CSS

div#areyousure {
    position: fixed;
    top: 100px;
    left: 50%;
    margin: 0 0 0 -200px;
    width: 400px;
    background: url(http://www.bluesys.ch/img/b40.png);
    }

    div#areyousure > div {
    background: #fff;
    margin: 8px;
    padding: 5px;
    text-align: center;
    }

    div#areyousure p {
    margin-top: 0;
    font-size: 16px;
    }

    div#areyousure a {
    display: inline-block;
    border: 1px solid #ccc;
    width: 30px;
    }

JavaScript

function blockmeornot(extlink) {
    var oherf = $(extlink).attr('href')
    var msgboxID = 'areyousure'
    var msgbox = '<div id="' + msgboxID +'"><div><p> are you sure you want to leave me for ' + oherf + ' ? </p><a class="yes" href="' + oherf + '"> yes </a> <a class="no" href="#"> no </a></div></div>'
    $('body').append(msgbox)
    $('#' + msgboxID + ' a.no').live('click', function(){ $('#' + msgboxID).fadeOut(400, function(){$(this).remove()}) })
}

$('a.external').click(function(){ blockmeornot(this); return false })