在模态内显示谷歌选择器

Question

有没有办法显示google驱动器选择器显示在自定义模式或div中？我有一个模式，用户可以选择多个提供商，例如谷歌，Dropbox。该模式包含其中的所有js和css文件。因此，当我点击谷歌驱动器时，选择器iframe嵌入body并嵌入到我的模态后面，虽然我的模态z-index是1030而选择器iframe zindex是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

实际上，您可以在将选择器对象设置为可见后对其进行操作。如果选择器是GooglePicker对象，则A是对话框模式的div。您可以使用JavaScript设置其z-index。

var picker = new google.picker.PickerBuilder().
  addView(self.viewId).
  setOAuthToken(self.oauthToken).
  setDeveloperKey(self.developerKey).
  setCallback(self.pickerCallback).
  build();

  picker.setVisible(true);

  picker.A.style.zIndex = 2000;

Answer 4

好的找到了一个解决方案，正如picker reference guide中提到的那样，有一个函数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");
    }