Cannot copy the color from textbox in Spectrum Colorpicker plugin when used inside Magnific Popup plugin

Question

I am using Spectrum colorpicker - https://bgrins.github.io/spectrum/ inside magnific popup - http://dimsemenov.com/plugins/magnific-popup/

My colorpicker config JS is below -

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

        },
    });

Magnific popup config -

    $.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>

Here is a fiddle for the same - http://jsfiddle.net/tmkez3ou/3/

The Problem is that when the colorpicker is opened, I see the textbox containing an rgba string but I cannot copy or select it.

This is possibly due to z-index Issues.

Please help..

Answer 1

Added appendTo option from Spectrum colorpicker

appendTo:"#test_box"