jquery弹出层类代码分享

当然，我可以分享一个简单的jQuery弹出层类的代码示例。这个类将使用基本的HTML和jQuery来创建一个可复用的弹出层功能。以下是一个简单的实现：

(function($) {
    $.fn.popup = function(options) {
        // 默认设置
        var settings = $.extend({
            content: '这是弹出层的内容', // 弹出层的内容
            title: '弹出层', // 弹出层的标题
            width: '400px', // 弹出层的宽度
            height: 'auto', // 弹出层的高度
            closeBtn: true, // 是否显示关闭按钮
            onClose: function() {} // 关闭弹出层时的回调函数
        }, options);

        // 弹出层HTML结构
        var popupHTML = '<div class="popup-overlay"></div>' +
            '<div class="popup-container" style="width:' + settings.width + '; height:' + settings.height + ';">' +
            (settings.title ? '<div class="popup-title">' + settings.title + (settings.closeBtn ? '<span class="close-btn">×</span>' : '') + '</div>' : '') +
            '<div class="popup-content">' + settings.content + '</div>' +
            '</div>';

        // 添加到body
        $('body').append(popupHTML);

        // 关闭按钮事件
        $('.close-btn', $('.popup-container')).click(function() {
            $.fn.popup.close();
            settings.onClose();
        });

        // 点击遮罩层关闭
        $('.popup-overlay').click(function() {
            $.fn.popup.close();
            settings.onClose();
        });

        // 显示弹出层
        $('.popup-overlay, .popup-container').fadeIn();

        // 公开关闭方法
        $.fn.popup.close = function() {
            $('.popup-overlay, .popup-container').fadeOut(function() {
                $(this).remove();
            });
        };

        // 链式调用支持
        return this;
    };
}(jQuery));

// 使用示例
$(document).ready(function() {
    $('#openPopup').click(function() {
        // 假设有一个按钮ID为openPopup用于触发弹出层
        $.fn.popup({
            content: '欢迎来到我的弹出层！',
            title: '示例标题',
            closeBtn: true,
            onClose: function() {
                console.log('弹出层已关闭');
            }
        });
    });
});

**注意**：

- 这个例子使用了一个自定义的jQuery插件`$.fn.popup`来创建和管理弹出层。

- 弹出层包括一个遮罩层和一个内容容器，可以自定义内容、标题、尺寸等。

- 通过点击关闭按钮或遮罩层，可以关闭弹出层，并触发一个回调函数。

- 请确保在HTML中引入了jQuery库，以便上述代码能够正常工作。

- 你可以根据实际需求调整样式和HTML结构。