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 trigger

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