显示内部/超过模态的谷歌选择器 [英] Show google picker inside/over modal

问题描述

有没有办法显示谷歌驱动器选择器显示在自定义模式或div内？我有一个模式，用户可以选择多个供应商。谷歌，Dropbox。该模式包含其中的所有js和css文件。所以当我点击谷歌驱动器时，选择器 iframe 被嵌入到 body 中，并在我的模式之后，尽管我的模态z-索引是1030，并且选择器 iframe zindex是2292。

解决方案

我通过设置前面的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）; 
 
 //我把这段代码放在前面。 
 
 var elements = document.getElementsByClassName（'picker-dialog'）; 
 for（var i = 0; i< elements.length; i ++）
 {
 elements [i] .style.zIndex =2000; 
} 
  

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.

解决方案

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

这篇关于显示内部/超过模态的谷歌选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！