Mostra google picker inside/over modal

Esiste un modo per mostrare il selettore di unità google da mostrare all'interno di un modal personalizzato o di un div? Ho una modale in cui ci saranno più fornitori che l'utente può scegliere, ad es. google, dropbox. Quella modale contiene tutti i file js e css in essa contenuti. Così, quando ho cliccare sul Google Drive selettore iframe è incorporato in body e dietro la mia modale, anche se il mio zIndex modale è il 1030 e il selettore iframe zindex è 2292.Mostra google picker inside/over modal

enter image description here

fonte

2014-05-12 Aamir Adnan

Ok trovato una soluzione, come detto nel picker reference guide c'è una funzione PickerBuilder.toUri() che restituirà l'URI generato dal builder. Così possiamo usare quel URI e lo ha utilizzato nel nostro 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"); 
    }

fonte

2014-05-12 20:09:20

Ciao Adnan. Il metodo di callback (pickerCallback) ha funzionato dall'iFrame? Sei riuscito a ottenere gli ID dei file selezionati dall'iFrame al frame principale in cui esiste effettivamente la funzione createPicker()? – Tom

No La soluzione di cui sopra non funziona. Funziona bene nel mostrare il selettore nell'iframe specifico ma lo stato è perso, quindi quando i file vengono selezionati gli ID non vengono restituiti e il selettore si aggiorna solo da solo. Alla fine ho abbandonato questa opzione e sono andato con il rendering predefinito di Google Picker. –

Grazie per essere tornato, Aamir. Mi chiedo quale sia lo scopo di questo metodo? – Tom

In realtà si può manipolare l'oggetto selettore dopo aver impostato al visibile. Se il selettore è l'oggetto GooglePicker, A è lo div per la finestra di dialogo modale. Puoi impostare il suo z-index usando JavaScript.

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;

fonte

2014-07-03 17:48:44 Zhichao

Come sapevi che 'A' è il div giusto? Questo non è documentato nel [riferimento al Raccoglitore] (https://devsite.googleplex.com/picker/docs/reference). So che funziona, ma 'picker.Ab' punta apparentemente allo stesso div, ma impostando il suo zindex non fa nulla. –

ho risolto questo problema impostando il contenitore selettore di Google sul fronte utilizzando seguente codice:

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

fonte

2015-08-01 10:21:18 AAAA

ho semplicemente aggiunto il seguente CSS:

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

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

fonte

2015-10-12 13:39:42

Mostra google picker inside/over modal

risposta

Problemi correlati