css - 在模式内部/上方显示谷歌选择器

Question

有没有办法让谷歌驱动器选择器显示在自定义模式或 div 中？我有一个模式，用户可以选择多个提供商，例如谷歌、保管箱。该模式包含其中的所有 js 和 css 文件。所以当我点击谷歌驱动器时，选择器iframe嵌入到body我的模态中和后面，尽管我的模态 z-index 是 1030 并且选择器iframezindex 是 2292。

Answer 1

我只是添加了以下 CSS：

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

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

Answer 2

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

    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 3

实际上，您可以在将选取器对象设置为可见后对其进行操作。如果 picker 是 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

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