Ich habe einen Code, der ein Popup-Fenster simuliert (Dank an Waqar Ahmad), die von einem Client-Handler ausgelöst wird. Ich möchte, dass dieses Popup neben der Schaltfläche angezeigt wird, die es ausgelöst hat, aber mit dem Skript sehe ich keine Möglichkeit, das Fenster zu verschieben. Der Code ist unten und die App isthier einsehbarHat jemand eine Idee, wie ich das Skript neu organisieren oder ändern soll, damit das Popup-Fenster in der Nähe der Schaltfläche angezeigt wird, die den Prozess ausgelöst hat?

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: Da der Server-Handler die einzige Möglichkeit zu sein scheint, die ich ausprobiert habe, ist die App sichtbarHier und das(endgültig?) Code ist unten für Informationen.

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
}