在模态框内/上方显示谷歌选择器

Question

有没有一种方法可以在自定义模态框或div中显示Google Drive选择器？我有一个模态框，用户可以选择多个提供程序，例如Google、Dropbox。该模态框包含所有的js和css文件。所以当我点击Google Drive时，选择器iframe嵌入到body并且在我的模态框后面，尽管我的模态框z-index为1030，而选择器iframe的z-index为2292。

- Aamir Rind

---

对我有效的解决方案是添加以下代码：var elements= document.getElementsByClassName('picker-dialog'); for(var i=0;i<elements.length;i++) { elements[i].style.zIndex = "2000"; } - Kemal AL GAZZAH

Answer 1

我通过以下代码将Google Picker容器置于前台来解决了这个问题：

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

- Ali Fattahian

---

这个解决了我的问题，但是没有（if（callback）picker.setCallback（callback）;），如果我加上这段代码，googlepicker根本就不会打开。 - Kemal AL GAZZAH

我很久以前写了这个答案，这段时间它可能已经发生了变化。那时候，我可能尝试使用我的代码中的“回调”来处理选择器表单的结果。 - Ali Fattahian

Answer 2

我只是添加了以下CSS：

我只需添加以下CSS：

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

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

- cs-NET

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;

- Zhichao

---

你是怎么知道 A 是正确的 div 的？这在 Picker reference 中没有记录。我知道它确实有效，但是 picker.Ab 指向显然相同的 div，但设置其 zindex 并没有任何作用。 - Dan Dascalescu

我已经完成了这个路线，它允许我很好地设置选择器的样式。运行console.info(picker)，你会在控制台中得到一个转储，其中包含你需要定位的元素。 - AutoBaker

Answer 4

好的，我找到了一个解决方案，如选择器参考指南中所述，有一个函数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");
    }

- Aamir Rind

---

你好，Adnan。iFrame 中的回调方法（pickerCallback）是否起作用了？你能否将从 iFrame 中选择的文件 ID 传递到实际存在 createPicker() 函数的父框架中呢？ - Tom

以上解决方案不起作用。它可以在特定的iframe中显示选择器，但状态会丢失，因此当选择文件时，ID不会返回，选择器只会刷新自身。最终，我放弃了这个选项，并采用了默认的Google Picker渲染。 - Aamir Rind

谢谢回复，Aamir。我想知道这个方法的目的是什么？ - Tom

@Tom，你有什么想法可以让状态得以保留吗？我正在使用Google Picker在桌面应用程序的WebView中，并且遇到了你解释过的同样问题。 - Mario Ishac