Internet explorer 8 应用程序脚本：IE8中弹出窗口定位失败

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

我使用Serge's/Waqar's作为弹出窗口，但是对于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);

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

遮罩面板的创建如下所示：

  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);

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

如果两个

固定属性被删除，则Chrome的行为方式与IE8相同-弹出窗口显示在屏幕外。我猜IE8不理解生成的任何固定定位

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

  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);

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

另一个问题是上面的代码（以及我的代码）没有指定CSS单元，这在技术上是一个错误。它在怪癖模式下工作（我认为GAS实际上提供了px，而不是浏览器猜测它）。在标准模式下，GAS会无声地删除padding spec（bad），并且它不会出现在输出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;
}

---

我恐怕帮不上忙，因为我至少5年没有接触过Windows PC:-）但你是否尝试按照原始代码指定顶部和左侧位置？嗨，Serge-是的，我从一开始就把它们放在了，这对IE8没有任何影响。其中一名测试人员在7英寸平板电脑上尝试了该网站，但找不到弹出窗口，因此我将其删除。没有它们，代码运行得非常好-弹出窗口在我尝试过的所有浏览器上都是合理的（当然，IE8除外！）也许你可以试着为平板电脑问题指定左上角和右上角，而不是像素？另请参阅w3school上关于ie8的评论：这只是一个想法…Corey的这篇文章可能也很有趣：谢谢-标准/怪癖非常接近。但是，所有的填充都消失了。我只是尝试用Firebug解决这个问题（尽管css知识有限）。输出肯定处于标准模式（从文档标题），但“宽度”仍然被视为整体显示宽度，好像它仍然处于怪癖模式，填充被忽略了…这是有趣的信息，谢谢。你介意展示整个代码和所有更正吗？-PS:Corey的帖子总是很棒！他是这里最好的资源之一，我知道会的帮助：-）