Show google picker inside/over modal

css, google-drive-api, google-picker

Solution

I solved this problem by setting the google picker container on front using following code :

    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(developerKey)
        .build();
    if (callback)
        picker.setCallback(callback);

    picker.setVisible(true);

    //I put this code to make the container in front.

    var elements= document.getElementsByClassName('picker-dialog');
    for(var i=0;i<elements.length;i++)
    {
        elements[i].style.zIndex = "2000";
    }

Problem

Is there a way to show the google drive picker to be shown inside a custom modal or a div? I have a modal where there will be multiple providers user can choose e.g. google, dropbox. That modal contains all the js and css files in it. So when I click on google drive the picker `iframe` is embedded into `body` and behind my modal, although my modal z-index is 1030 and picker `iframe` zindex is 2292.

Original source