apps-script：IE8中的弹出窗口定位失败

Question

是的，我知道。请不要做任何明显的评论;我的生命太短暂了。

我正在使用Serge's / Waqar的code作为弹出窗口，但是弹出窗口出现在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);

如果删除了两个fixed属性，则Chrome的行为方式与IE8相同 - 弹出窗口显示在屏幕外。我猜测IE8无法理解生成的固定位置。

感谢。

Answer 1

我跟踪了Serge的链接，它解决了问题（弹出窗口在IE8 / 9，FF，Chrome，Safari，Opera上正确显示），还有一个更改。基本上，您必须设置标准模式而不是Quirks模式（无论如何都是好主意），如下所示：

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

另一个问题是上面的代码（和我的代码）没有指定CSS单位，这在技术上是一个错误。它在Quirks模式下工作（我认为GAS实际上提供px，而不是浏览器猜测它。在标准模式下，GAS默默地删除填充规范（坏），它不会出现在输出CSS中。

修改

根据要求在下方添加了确认对话框弹出代码。没有更正，除了px，但我已经改变它，使它更像传统的是/否对话框，所以很多原件已经消失。您需要触发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;
}