9

カスタム モーダルまたは div 内に表示される Google ドライブ ピッカーを表示する方法はありますか? Google、Dropboxなど、ユーザーが選択できる複数のプロバイダーがあるモーダルがあります。そのモーダルには、すべての js ファイルと css ファイルが含まれています。したがって、Google ドライブをクリックすると、モーダルの z-index は 1030 で、ピッカーの zindex は 2292 ですが、ピッカーはモーダルの背後にiframe埋め込まれます。bodyiframe

ここに画像の説明を入力

4

4 に答える 4

8

次の CSS を追加するだけです。

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

.picker-dialog {
    z-index: 20001 !important;
}
于 2015-10-12T13:39:42.123 に答える
7

次のコードを使用して、前面に Google ピッカー コンテナーを設定することで、この問題を解決しました。 

    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";
    }
于 2015-08-01T10:21:18.390 に答える
4

実際には、ピッカー オブジェクトを可視に設定した後で操作できます。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;
于 2014-07-03T17:48:44.370 に答える
1

解決策が見つかりました。ピッカー リファレンス ガイド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");
    }
于 2014-05-12T20:09:20.253 に答える