Pop up message like SO Flag window

Question

How do i create a pop up window/message like what you see on this site when you click the flag link

Answer 1

You can use a jQuery plugin since you've tagged this as jQuery. Tooltip is a nice one that you can use inside an event handler.

This tooltip plugin is similar but looks fantastic.

Answer 2

Here's one custom solution. Just creates a div, fades it in, and positions it where you clicked.

jQuery:

$('document').ready(function() {

    $('#target').click(function (event) {
        var x = event.pageX;
        var y = event.pageY
        $('<div id="popup">Click to close</div>').appendTo('body');
        $('#popup').css({opacity:0,display:'block',top:y,left:x}).animate({opacity: 1}, 300);
    });

    $('#popup').live('click', function() {
        $(this).animate({opacity: 0}, 300, function(){$(this).remove();});
    });

});

CSS:

#target {
            cursor: pointer;
            position:absolute;
            top: 100px;
            left: 100px;
            background: orange;
            border: 2px solid red;
            color: white;
            padding: 10px;
        }

        #popup {
            width: 100px;
            height: 100px;
            background: #EEE;
            border: 4px dashed purple;
            position: absolute;
            display:none;
        }

HTML:

<div id="target">click here</div>