W2UI w2popup问题：打开第二个弹窗时保留第一个弹窗

问题原因 #

W2UI的w2popup默认是单例模式，调用$().w2popup('open')时会自动关闭当前已打开的弹窗，导致新弹窗直接替换旧弹窗。要实现关闭第二个弹窗后第一个仍保留的效果，需要为每个弹窗创建独立的实例。

解决方案 #

为每个弹窗创建独立的DOM容器和w2popup实例，避免复用同一个全局实例。

步骤1：修改第一个弹窗的打开逻辑 #

$(document).on('click', '#cmdAddOverLayerCat', function() {
    openPopup();
});

function openPopup() {
    // 动态创建第一个弹窗的专属容器
    const $popup1 = $('<div id="popup-first"></div>').appendTo('body');
    
    $popup1.w2popup({
        title: '第一个弹窗',
        // 嵌入表单内容
        body: $().w2form({
            name: 'frmAddOverLayer',
            style: 'border: 0; background-color: transparent;',
            formHTML: `
                <div class="w2ui-field">
                    <label>打开第二个弹窗:</label>
                    <div>
                        <button class="w2ui-btn" name="secondPopup" onclick="getSecondPopup();" type="button">Token</button>
                    </div>
                </div>
            `
        }).render(),
        // 关闭弹窗时自动移除容器，避免页面残留
        onClose: function() {
            $popup1.remove();
        }
    });
    
    // 打开第一个弹窗
    $popup1.w2popup('open');
}

步骤2：修改第二个弹窗的打开逻辑 #

function getSecondPopup() {
    // 动态创建第二个弹窗的专属容器
    const $popup2 = $('<div id="popup-second"></div>').appendTo('body');
    
    $popup2.w2popup({
        title: 'secondPopup',
        body: '这里放入第二个弹窗的具体内容',
        actions: {
            "Close": function () { 
                // 关闭第二个弹窗
                $popup2.w2popup('close'); 
            }
        },
        // 关闭弹窗时自动移除容器
        onClose: function() {
            $popup2.remove();
        }
    });
    
    // 打开第二个弹窗
    $popup2.w2popup('open');
}

原理说明 #

• 每个弹窗使用独立的DOM容器，绑定各自的w2popup实例，互相不会干扰。
• 打开新弹窗时不会触发旧弹窗的关闭逻辑，实现弹窗叠加效果。
• 弹窗关闭时自动移除对应DOM容器，避免页面残留无用元素。

内容的提问来源于stack exchange，提问作者Manuel Yerbes