javascript - 在 Magnific Popup 插件中使用时，无法从 Spectrum Colorpicker 插件中的文本框复制颜色

Question

我正在使用 Spectrum 颜色选择器 - https://bgrins.github.io/spectrum/内部宏伟的弹出窗口 - http://dimsemenov.com/plugins/magnific-popup/

我的颜色选择器配置 JS 在下面 -

    $(".color").spectrum({
        showInput: true,
        className: "test-colorpicker",
        preferredFormat: "rgb",
        showButtons: false,
        showAlpha: true,
        //clickoutFiresChange: true,
        change: function() {

        },
    });

华丽的弹出配置-

    $.magnificPopup.open({
        items: {
            src: '#test_box',
            type: 'inline'
        },
        //type : 'inline',
        midClick: true, 
        preloader:true,
        showCloseBtn: true, 
        closeBtnInside: true, 
        closeOnContentClick: false, 
        closeOnBgClick: false, 
        enableEscapeKey: true, 
        modal: false, 
        alignTop: false, 
        mainClass: 'mfp-img-mobile mfp-fade', 
        removalDelay: 0 
    });

HTML -

<div id="test_box">
<input type='text' class="color" value="#e2e2e2"/>
</div>

这是相同的 fiddle - http://jsfiddle.net/tmkez3ou/3/

问题是当颜色选择器打开时，我看到包含 rgba 字符串的文本框，但我无法复制或选择它。

这可能是由于 z-index 问题。

请帮忙..

Answer 1

从 Spectrum colorpicker 添加了 appendTo 选项

appendTo:"#test_box"