如何从客户端处理程序移动弹出窗口？

Question

我有一个代码模拟由客户端处理程序触发的弹出窗口（thanks to Waqar Ahmad）。 我想让这个弹出窗口出现在触发它的按钮附近但是我用脚本我看不到移动窗口的方法。 代码在下面，应用程序是viewable here，如果有人知道我应该如何重新组织或更改脚本，以便弹出窗口显示在触发该过程的按钮附近？

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
    }

---

编辑：由于服务器处理程序似乎是我尝试过的唯一方式，因此该应用可以查看here和（最终？）代码如下信息。

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我使用对话框做了类似的事情来获得这种功能 在显示对话框的正确功能中，我决定对话框的位置。

我用它来放大图像，所以我只把我用于对话框的（整个）代码。

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

来自James的

的applyCss

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

Answer 2

从我迄今为止发现的内容中使用我在这些回复中看到的内容，这种方法是相应地定位我的小部件，而不是实际的形式本身。当然，除非我遗漏了一些东西，这是完全可能的。感谢到目前为止的回复。