在模态内显示谷歌选择器

Question

有没有办法显示谷歌驱动器选择器显示在自定义模式或div内？我有一个模态,其中将有多个提供者用户可以选择例如谷歌,保管箱.该模式包含其中的所有js和css文件.因此,当我点击谷歌驱动器时,选择器iframe嵌入到body我的模态中,虽然我的模态z-index是1030,而选择器iframezindex是2292.

Answer 1

我通过使用以下代码在前面设置谷歌选取器容器解决了这个问题:

    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";
    }

Answer 2

我只是添加了以下CSS：

.picker-dialog-bg {
    z-index: 20000 !important;
}

.picker-dialog {
    z-index: 20001 !important;
}

Answer 3

好的找到了一个解决方案，正如选择器参考指南中提到的，有一个函数PickerBuilder.toUri()将返回由构建器生成的 URI。所以我们可以使用该 URI 并在我们自己的 iframe 中使用它：

function createPicker() {
    var picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.DOCUMENTS)
        .addView(google.picker.ViewId.PRESENTATIONS)
        .addView(google.picker.ViewId.SPREADSHEETS)
        .addView(google.picker.ViewId.PDFS)

        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appID)
        .setOAuthToken(ACCESS_TOKEN)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .toUri();


        var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
        iframe.attr({
            width: 500,
            height: 500,
            src: picker
        });
        $("<div></div>").append(iframe).appendTo("#my_container");
    }