Jquery 封装弹出文字插件 可重复使用

以下是一个基本的 jQuery 封装弹出文字插件的示例：

(function ($) {
    $.fn.popupText = function (options) {
        var defaults = {
            color: '#000000',
            backgroundColor: '#ffffff',
            duration: 5000
        };
        var settings = $.extend({}, defaults, options);
        return this.each(function () {
            var $this = $(this);
            var text = $this.text();
            $this.css({
                'color': settings.color,
                'background-color': settings.backgroundColor,
                'cursor': 'pointer'
            }).on('click', function () {
                var $popup = $('<div class="popup-text"></div>')
                    .text(text)
                    .css({
                        'position': 'absolute',
                        'top': $this.offset().top - 30,
                        'left': $this.offset().left,
                        'padding': '10px',
                        'border': '1px solid #000000',
                        'background-color': settings.backgroundColor,
                        'color': settings.color
                    })
                    .appendTo('body')
                    .fadeIn(500)
                    .delay(settings.duration)
                    .fadeOut(500, function () {
                        $(this).remove();
                    });
            });
        });
    };
})(jQuery);

使用该插件可以通过以下方式：

$('.my-element').popupText({
    color: '#ffffff',
    backgroundColor: '#000000',
    duration: 3000
});

该插件将为每个匹配的元素（`.my-element`）添加一个单击事件，当单击元素时，它将在元素的上方显示一个弹出文本框，并在指定的持续时间后消失。可以通过传递选项对象来自定义文本框的外观和行为。