apps-script: popup window positioning failing in IE8 - internet-explorer-8

Question

Yes, I know. And please don't make any of the obvious comments; my life is way too short.
I'm using Serge's/Waqar's code for a popup window, but the popup window is appearing offscreen for IE8 (it's Ok for IE9). The user can find it if they realise that a scroll bar has appeared and they scroll all the way down, but they probably won't do that. Has anyone got any suggestions for a fix? The popup panel is created as follows:
var popup = app.createVerticalPanel()
.setId('popupPanelId')
.setVisible(false)
.setStyleAttributes({
'position' : 'fixed',
'border' : '1px solid blue',
'padding' : '10',
'background' : 'beige',
'width' : POPUP_WIDTH,
'zIndex' : '2'});
and the mask panel is created as follows:
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);
If the two fixed attributes are removed, then Chrome behaves in the same way as IE8 - the popup appears offscreen. I'm guessing that IE8 doesn't understand whatever fixed positioning is generated.
Thanks.

Answer 1

I followed up Serge's link, and it fixed the problem (the popup appears correctly on IE8/9, FF, Chrome, Safari, Opera), with one more change. Basically, you have to set Standards mode instead of Quirks mode (good idea anyway) as follows:
function doGet() {
var app = UiApp.createApplication().setStandardsMode(true);
...
}
The other problem is that the code above (and my code) doesn't specify CSS units, which is technically an error. It works in Quirks mode (I think GAS actually supplies px, rather than the browser guessing it). In Standards mode, GAS silently drops the padding spec (bad) and it doesn't appear in the output CSS.
EDIT
Added confirmation dialog popup code below as requested. No corrections, apart from the px, but I have changed it to make it more like a traditional yes/no dialog box, so a lot of the original has disappeared. You need to trigger submitHandler to generate the popup, and write code for OkHandler and CancelHandler. The main issue here is positioning the popup. See the link above.
/* ----------------------------------------------------------------------------
* 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;
}