Popup alert

by gnepud

HTML

<a href='#' data-title='Alert' data-msg='This is my message'>alert</a>


<div id="popup">
    <div id="title"></div>
    <div id="msg"></div>
</div>

CSS

#popup{
    display: none;
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: #ffffdd;
    border: 1px solid #888;
    padding: 5px;
    cursor: pointer;
}

#title{
    font-weight: bold;
}

JavaScript

$(document).ready(function() {

    $("a").click(function(evt) {
        var title = $(this).data('title');
        var msg = $(this).data('msg');
        var top = evt.pageY + 3;
        var left = evt.pageX + 3;
        showPopup(top, left, title, msg);
    });

    $("#popup").click(function() {
        $(this).hide();
    });

});

function showPopup(top, left, title, msg) {
    $("#title").html(title);
    $("#msg").html(msg);
    $("#popup").css({
        top: top,
        left: left
    }).show();

}