javascript - 弹出消息如 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>