简单JS实现弹出层效果

简单JS实现弹出层效果

// 动态创建弹出层容器
function createLayerContainer() {
    // 检查容器是否已存在，避免重复创建
    if ($('#customLayer').length > 0) {
        return;
    }
    
    // 创建弹出层HTML结构
    var layerHtml = `
        <div id="customLayer" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;">
            <!-- 遮罩层 -->
            <div class="layer-mask" style="position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.3;transition:opacity 0.3s;"></div>
            <!-- 弹窗主体 -->
            <div class="layer-dialog" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:6px;overflow:hidden;min-width:300px;max-width:90%;box-shadow:0 2px 12px rgba(0,0,0,0.1);transition:all 0.3s;">
                <!-- 标题栏 -->
                <div class="layer-title" style="padding:14px 16px;border-bottom:1px solid #eee;font-size:16px;color:#333;line-height:1;">
                    <span class="title-text"></span>
                    <span class="layer-close" style="float:right;cursor:pointer;color:#909399;font-size:18px;line-height:1;margin-top:-2px;">×</span>
                </div>
                <!-- 内容区 -->
                <div class="layer-content" style="padding:20px;"></div>
            </div>
        </div>
    `;
    
    // 将创建的结构添加到body中
    $('body').append(layerHtml);
}

// 封装弹出层方法
function layerOpen(options) {
    // 先创建容器（如果不存在）
    createLayerContainer();
    
    // 默认配置
    var defaults = {
        title: '信息',       // 标题
        content: '',         // 内容（支持HTML）
        area: 'auto',        // 尺寸，如['300px', '200px']或'auto'
        shadeClose: true     // 点击遮罩是否关闭
    };
    
    // 合并配置
    var opts = $.extend({}, defaults, options);
    
    // 填充内容
    $('#customLayer .title-text').text(opts.title);
    $('#customLayer .layer-content').html(opts.content);
    
    // 设置尺寸
    if (opts.area !== 'auto') {
        var width = opts.area[0] || 'auto';
        var height = opts.area[1] || 'auto';
        $('#customLayer .layer-dialog').css({
            width: width,
            height: height
        });
    } else {
        $('#customLayer .layer-dialog').css({
            width: 'auto',
            height: 'auto'
        });
    }
    
    // 显示弹出层
    $('#customLayer').show();
    
    // 关闭事件
    var closeLayer = function() {
        $('#customLayer').hide();
        // 解绑事件避免重复绑定
        $('#customLayer .layer-close').off('click');
        $('#customLayer .layer-mask').off('click');
    };
    
    // 关闭按钮事件
    $('#customLayer .layer-close').on('click', closeLayer);
    
    // 遮罩点击关闭
    if (opts.shadeClose) {
        $('#customLayer .layer-mask').on('click', closeLayer);
    }
    
    // ESC键关闭
    $(document).on('keyup.layer', function(e) {
        if (e.keyCode === 27) {
            closeLayer();
            $(document).off('keyup.layer');
        }
    });
    
    // 返回关闭方法
    return {
        close: closeLayer
    };
}

调用示例：

    $('#btn1').on('click', function() {
        layerOpen({
            title: '提示',
            content: '这是一个基础弹出层'
        });
    });