Всплывающее сообщение, как окно SO Flag

Question

Как создать всплывающее окно / сообщение, подобное тому, что вы видите на этом сайте, когда нажимаете на ссылку флага

Answer 1

Вот одно индивидуальное решение. Просто создайте div, добавьте его и разместите там, где вы щелкнули.

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>

Answer 2

Вы можете использовать плагин jQuery, так как вы пометили его как jQuery. Подсказка - это хорошая подсказка, которую вы можете использовать внутри обработчика событий.

Этот плагин всплывающей подсказки похож, но выглядит фантастически.