0

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

我正在使用 Serge's/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);

如果这两个fixed属性被删除，那么 Chrome 的行为方式与 IE8 相同 - 弹出窗口出现在屏幕外。我猜 IE8 不理解生成的任何固定定位。

谢谢。

4

1 回答 1

1

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

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

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

编辑

根据要求在下方添加了确认对话框弹出代码。没有更正，除了px，但我已经改变它使它更像一个传统的是/否对话框，所以很多原来的已经消失了。您需要触发以生成弹出窗口，并为和submitHandler编写代码。这里的主要问题是定位弹出窗口。请参阅上面的链接。OkHandlerCancelHandler

/* ----------------------------------------------------------------------------
 * 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 回答