google apps script - How to move a popup window from a client handler?

Question

I have a code that simulates a popup window (thanks to Waqar Ahmad) that is triggered by a client handler. I would like to get this popup appear near the button that triggered it but with the script I have I see no way to move the window. The code is below and the app is viewable here, if ever someone has an idea about how I should re-organise or change the script so that the popup window shows up near the button that fired the process ?

var choice = ['-','Choice 1','Choice 2','Choice 3','Choice 4']; // var definition

function doGet(){
      var app = UiApp.createApplication().setStyleAttribute("background", "beige");

      app.add(createMaskPanel_());//this is used to make popup panel modal

      var mainPanel = app.createVerticalPanel().setStyleAttributes({'padding' : '15'});
      app.add(mainPanel);
 // idx holds the index value of the button that is pressed
      var idx = app.createTextBox().setId('idx').setName('idx').setVisible(false);
      mainPanel.add(idx);
      //Make a panel for popup and add your popup elements
      var popup = app.createVerticalPanel().setId('popup').setVisible(false)
      .setStyleAttributes(
        {'position': 'fixed', 
         'border' : '1px solid brown',
         'padding' : '15',
         'background' : 'beige',
         'top' : '150PX',
         'left' : '300PX',
         'width' : '200', 
         'height':'120',
         'zIndex' : '2'});
      popup.add(app.createLabel('Select your choice').setId('label'));
      var list = app.createListBox().setId('ppValue').setName('ppValue').setWidth('200')
        .addItem(choice[0], '0').addItem(choice[1], '1').addItem(choice[2], '2').addItem(choice[3], '3').addItem(choice[4], '4');
      popup.add(list);
      var valHandler = app.createServerHandler('showVal').addCallbackElement(mainPanel).addCallbackElement(popup);;
      popup.add(app.createButton('? Close / confirm').addClickHandler(valHandler));
      app.add(popup);
      var mask = app.getElementById('mask')
      var ppHandler = app.createClientHandler().forTargets([popup,mask]).setVisible(true)

      var flex = app.createFlexTable()
  for(nn=1;nn<11;++nn){
      flex.setText(nn,0,'Item nr '+nn)
      var text = app.createTextBox().setHeight('26').setWidth('150').setId('val'+nn).setName('val'+nn)
      flex.setWidget(nn,1,text);
      var handler = app.createClientHandler().forTargets(idx).setText(nn).forTargets(text).setText('suggestion = ?');
      flex.setWidget(nn,2,app.createButton('?').setHeight('26').setId('btn'+nn).addClickHandler(handler).addClickHandler(ppHandler))
      }
      mainPanel.add(flex);
      return app;
    }

function createMaskPanel_(){ //Called when UI loads, initially it will be invisble. it needs to be made visible
      var app = UiApp.getActiveApplication();
      var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui
      .setStyleAttributes({
        'backgroundColor' : '#F0F0F0',
        'position' : 'fixed',
        'top' : '0',
        'left' : '0',
        'zIndex' : '1',
        'opacity' : '0.4'}).setVisible(false);
      mask.add(app.createLabel('POPUP')
               .setStyleAttribute('color', '#F0F0F0')
               .setStyleAttribute('opacity', '0.6')); 
      return mask;
    }

function showVal(e){
      var app = UiApp.getActiveApplication();
      var source = e.parameter.idx
      var value = app.getElementById('val'+source)
      value.setText('choice value = '+choice[e.parameter.ppValue])
      var popup = app.getElementById('popup')
      var mask = app.getElementById('mask')
      popup.setVisible(false)
      mask.setVisible(false)
      return app
    }

---

EDIT : Since the server handler seems to be the only way I gave it a try, the app is viewable here and the (final ?) code is below for info.

var choice = ['-','Choice 1','Choice 2','Choice 3','Choice 4','Choice 5','Choice 6','Last choice !'];//var definition

function doGet(){
  var app = UiApp.createApplication().setStyleAttribute("background", "beige");
  app.add(createMaskPanel_());//this is used to make popup panel modal
  var top = '100PX'
  var left = '265PX'
  var mainPanel = app.createVerticalPanel().setStyleAttributes({'padding' : '15'});
  app.add(mainPanel);
// item definitions
  var idx = app.createTextBox().setId('idx').setName('idx').setVisible(false);
  mainPanel.add(idx);
  //Make a panel for popup and add your popup elements
  var popup = app.createVerticalPanel().setId('popup').setVisible(false)
  .setStyleAttributes(
    {'position': 'fixed', 
     'border' : '1px solid brown',
     'padding' : '10',
     'background' : 'beige',
     'top' : top,
     'left' : left,
     'width' : '200', 
     'height':'110',
     'zIndex' : '2'});
  popup.add(app.createLabel('Select your choice').setId('label'));
  var list = app.createListBox().setId('ppValue').setName('ppValue').setWidth('160')
   for(c in choice){list.addItem(choice[c], c)}
  popup.add(list);
  var valHandler = app.createServerHandler('showVal').addCallbackElement(mainPanel).addCallbackElement(popup);;
  popup.add(app.createButton('? Close / confirm').addClickHandler(valHandler));
  app.add(popup);

  var idxHandler = app.createServerHandler('setidx').addCallbackElement(mainPanel)


var flex = app.createFlexTable()
for(nn=1;nn<11;++nn){
  flex.setText(nn,0,'Item nr '+nn)
  flex.setWidget(nn,1,app.createTextBox().setPixelSize(180,26).setId('val'+nn).setName('val'+nn));
  flex.setWidget(nn,2,app.createButton('?').setHeight('26').setId('btn'+nn).addClickHandler(idxHandler))
  }
  mainPanel.add(flex);
  return app;
}

function setidx(e){
  var app = UiApp.getActiveApplication();
  var idx = app.getElementById('idx')
  var idxval = Number(e.parameter.source.replace(/[a-z]/g,''))
  idx.setValue(idxval);
  var top = -30+38*idxval+'PX'
  var left = '265PX'
  var popup = app.getElementById('popup')
  var mask = app.getElementById('mask')
  var label = app.getElementById('label').setText('Select your choice (item '+idxval+')')
  var value = app.getElementById('val'+idxval)
  value.setText('suggestion = ?')  
  popup.setVisible(true)
  mask.setVisible(true)
  popup.setStyleAttributes(
    {'top' : top,
     'left' : left});
  return app
}

function createMaskPanel_(){ //Called when UI loads, initially it will be invisble. it needs to be made visible
  var app = UiApp.getActiveApplication();
  var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui
  .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;
}

function showVal(e){
  var app = UiApp.getActiveApplication();
  var source = e.parameter.idx
  var value = app.getElementById('val'+source)
  value.setText('choice value = '+e.parameter.ppValue+' ('+choice[Number(e.parameter.ppValue)]+')')
  var popup = app.getElementById('popup')
  var mask = app.getElementById('mask')
  popup.setVisible(false)
  mask.setVisible(false)
  return app
}

Answer 1

Serge I did something simular using a dialogbox to get this kind of functionality.
In the proper function that shows the dialogbox I decide the position of the dialogbox.

I used it to enlarge a image so I just put the (entire) code I used for the dialogbox.

function showimg(e){
  var app = UiApp.getActiveApplication();

  //
  // Style
  //
  var _showimg =
  {
    "position":"fixed",
    "width":"200px",      // here you can change size 
    "top":"100px",        // and horizontal position maybe you can use your 
    "left":"100px",       // your setidx function .
    "opacity":"0.95",
    "border":"none",
    }  
  var _container =
  {
    "width":"90%",
    "border":"none",
    }  

  var _img= {
    "background-color":"none",
    "width":"90%",
    "border":"4px solid f2f2f2",
  }

  var _btn= {
    "background-color":"none",
    "background":"none",
    "width":"80px",
    "height":"24px",
    "border":"None",
    "font-family":"hobo std",
    "font-size":"0.9em",
    "color":"3f3f3f",
    "opacity":"1",
  }

  //
  // aplication
  //    
  var f = DocsList.find("YOURSPREADSHEET");
  var id = f[0].getId();
  var ss = SpreadsheetApp.openById(id);
  var sheet = ss.getSheetByName("YOURSHEET");

  var rows= sheet.getLastRow();
  var cols = sheet.getLastColumn();

  var dialogBox = app.createDialogBox(true, true).setId("dialogBox");
  applyCSS(dialogBox, _showimg);

  var cont = app.createAbsolutePanel().setId("cont").setVisible(true);
  applyCSS(cont, _container); 

  var source = e.parameter.source;


  for (var i = 1; i < rows ; i++) { 
    for (var j = 1; j <6 ; j++) {
      if (source == "imgb"+[j]+[i]) {
     if (j == 1) { 
       var img = app.createImage().setId('img').setUrl(sheet.getRange(i+1,[5]).getValue()).setVisible(true); 
       dialogBox.setText(sheet.getRange(i+1,[6]).getValue());
      }
     if (j == 2) { 
       var img = app.createImage().setId('img').setUrl(sheet.getRange(i+1,[7]).getValue()).setVisible(true); 
       dialogBox.setText(sheet.getRange(i+1,[8]).getValue());
      }
      }  
      app.getElementById( "imgb"+[j]+[i]).setEnabled(false);                   
      //}

    }

  }

       applyCSS(img,_img)
app.createImage().setId('img').setUrl("https://lh6.googleusercontent.com/-PTl6c-pfHoc/TzFvp1dteaI/AAAAAAAACTI/Mmx-7RU4i8g/s640/xxxxxxx.jpg").setVisible(true);
    //  applyCSS(img,_img)


  var closeb = app.createButton("Close").setId("closeb").setTitle("close");
  applyCSS(closeb,_btn);

  var closeH = app.createServerClickHandler("closediag");
  closeb.addClickHandler(closeH);
  closeH.addCallbackElement(cont);



  cont.add(img);
  cont.add(closeb);
  dialogBox.add(cont);
  app.add(dialogBox);
  return app;
}

The applyCss from James

function applyCSS(element, style){
  for (var key in style){
    element.setStyleAttribute(key, style[key]); 
  }  
}