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

Answer 2

From what I've discovered so far using what I see in these replies, this methodology is positioning my widgets accordingly, but not the actual form itself. Unless, of course, I'm missing something, which is entirely possible. Thanks for the replies so far.