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

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

我的colorpicker配置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>

这是相同的小提琴-http://jsfiddle.net/tmkez3ou/3/

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

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

请帮忙..

最佳答案

从Spectrum拾色器中添加了appendTo选项

appendTo:"#test_box"