0

はい、知っています。そして、明らかなコメントは一切しないでください。私の人生は短すぎる。

ポップアップ ウィンドウにSerge/Waqar のコードを使用していますが、IE8 ではポップアップ ウィンドウが画面外に表示されます (IE9 では問題ありません)。ユーザーは、スクロール バーが表示されていることに気付き、下までスクロールすれば見つけることができますが、おそらくそうはしないでしょう。修正のための提案はありますか？ポップアップ パネルは次のように作成されます。

  var popup = app.createVerticalPanel()
    .setId('popupPanelId')
    .setVisible(false)
    .setStyleAttributes({
    'position'   : 'fixed', 
    'border'     : '1px solid blue',
    'padding'    : '10',
    'background' : 'beige',
    'width'      : POPUP_WIDTH, 
    'zIndex'     : '2'});

マスク パネルは次のように作成されます。

  var mask = app.createVerticalPanel()
    .setId('maskPanelId')
    .setSize('100%', '100%')
    .setStyleAttributes({
    'backgroundColor' : '#F0F0F0',
      'position'      : 'fixed',
      'top'           : '0',
      'left'          : '0',
      'zIndex'        : '1',
      'opacity'       : '0.6'})
    .setVisible(false);

2 つのfixed属性が削除された場合、Chrome は IE8 と同じように動作します - ポップアップは画面外に表示されます。IE8 は、生成された固定位置が何であれ理解していないと推測しています。

ありがとう。

4

1 に答える 1

1

Sergeのリンクをたどると、問題が修正され（ポップアップはIE8/9、FF、Chrome、Safari、Operaで正しく表示されます）、もう1つの変更が加えられました。基本的に、次のように Quirks モードの代わりに Standards モードを設定する必要があります (とにかく良い考えです)。

function doGet() {
  var app = UiApp.createApplication().setStandardsMode(true);
  ...
}

もう 1 つの問題は、上記のコード (および私のコード) が CSS ユニットを指定していないことです。これは技術的にはエラーです。pxQuirks モードで動作します (ブラウザーが推測するのではなく、GAS が実際に提供していると思います)。標準モードでは、GAS はパディング仕様を黙って削除し (悪い)、出力 CSS に表示されません。

編集

リクエストに応じて、確認ダイアログのポップアップ コードを以下に追加しました。を除いて修正はありませんpxが、従来の yes/no ダイアログ ボックスのように変更したため、元の多くが消えてしまいました。submitHandlerポップアップを生成するためにトリガーし、 と のコードを記述する必要がOkHandlerありCancelHandlerます。ここでの主な問題は、ポップアップの配置です。上記のリンクを参照してください。

/* ----------------------------------------------------------------------------
 * All the remaining code in this file handles a modal
 * dialog box which appears when the user hits the 'submit' button. The box 
 * is not movable (a GAS bug), but it can be positioned, by changing the 
 * 'top' and 'left' style attributes. Inspired by Serge's popup code at 
 * http://stackoverflow.com/q/13692563/785194.
 * ------------------------------------------------------------------------- */

/**
 * Popup setup. Create two vertical panels, with different Z indexes,
 * and create a label in the popup panel which will hold the dialog
 * text. Finally, add handlers for the 'Ok' and 'Cancel' buttons.
 */
function setupPopup(app, mainPanel) {
  app.add(createMaskPanel());
  var popup = app.createVerticalPanel()
    .setId('popupPanelId')
    .setVisible(false)
    .setStyleAttributes({
    'position'   : 'fixed', 
    'border'     : '1px solid blue',
    'padding'    : '10px',
    'background' : 'beige',
//  'top'        : POPUP_TOP,
//  'left'       : POPUP_LEFT,
    'width'      : POPUP_WIDTH, 
//  'height'     : POPUP_HEIGHT,
    'zIndex'     : '2'});
  popup.add(app.createLabel('').setId('dialogTextId'));

  var OkHandler = app.createServerHandler('OkHandler')
    .addCallbackElement(mainPanel)
    .addCallbackElement(popup);
  var CancelHandler = app.createServerHandler('CancelHandler')
    .addCallbackElement(mainPanel)
    .addCallbackElement(popup);

  // create a table with two cells, and insert two buttons into those
  // cells
  var buttonTable = app.createFlexTable().setId('buttonTable');
  buttonTable.insertRow(0).addCell(0).addCell(0);

  var OkButton     = app.createButton('Continue');
  var CancelButton = app.createButton('Cancel');
  OkButton.addClickHandler(OkHandler);
  CancelButton.addClickHandler(CancelHandler);
  buttonTable.setWidget(0, 0, OkButton);
  buttonTable.setWidget(0, 1, CancelButton);
  popup.add(buttonTable);

  app.add(popup);
} // setupPopup()

/**
 * A mask panel, to make the popup modal.
 */
function createMaskPanel() { 
  var app  = UiApp.getActiveApplication();
  var mask = app.createVerticalPanel()
    .setId('maskPanelId')
    .setSize('100%', '100%')
    .setStyleAttributes({
    'backgroundColor' : '#F0F0F0',
      'position'      : 'fixed',
      'top'           : '0',
      'left'          : '0',
      'zIndex'        : '1',
      'opacity'       : '0.6'})
    .setVisible(false);
  mask.add(app.createLabel('POPUP')
           .setStyleAttribute('color', '#F0F0F0')
           .setStyleAttribute('opacity', '0.6')); 
  return mask;
}

/**
 * 'Submit' button handler.
 */
function submitHandler(e){
  var app      = UiApp.getActiveApplication();
  var popup    = app.getElementById('popupPanelId');
  var mask     = app.getElementById('maskPanelId');

  app.getElementById('dialogTextId').setText("yada yada");
  popup.setVisible(true);
  mask.setVisible(true);
  popup.setStyleAttributes(
    {'top'  : POPUP_TOP,
     'left' : POPUP_LEFT});
  return app;
}

/**
 * Popup box 'Ok' handler; add the form data to the output spreadsheet.
 */
function OkHandler(e) {
  ...
  return app;
}

function CancelHandler(e) {
  ...
  return app;
}
于 2013-01-23T15:18:03.067 に答える