ポップアップ・メッセージ・ボックスの異なる位置の効果

コードをzkDemoに配置してテストします.
 

<vbox>
<textbox value="Jerry"  type="password" width="150px">
       <attribute name="onChange">
                newpw.open(self,"end_before");
                self.setStyle("border: 1px solid #ed7a66;");
        </attribute>
</textbox>
<popup id="newpw">
      <image src="/img/Centigrade-Widget-Icons/ArrowLeft-16x16.png"/>
      <label value=" , !" style="color::Red"/>
      <image src="/img/Centigrade-Widget-Icons/PaperClip-16x16.png" onClick="newpw.close()"/>
</popup>
 </vbox> 

 
赤の位置のオプションパラメータ:

before_start the popup appears above the anchor, aligned on the left. 効果:図1

before_end the popup appears above the anchor, aligned on the right. 効果:図2

after_start the popup appears below the anchor, aligned on the left. 効果:図3

after_end the popup appears below the anchor, aligned on the right. 効果:図4

start_before the popup appears to the left of the anchor, aligned on the top. 効果:図5

start_after the popup appears to the left of the anchor, aligned on the bottom. 効果:図6

end_before the popup appears to the right of the anchor, aligned on the top. 効果:図7

end_after the popup appears to the right of the anchor, aligned on the bottom. 効果:図8

overlap the popup overlaps the anchor, with the top-left corners of both the anchor and popup aligned. 効果:図9

overlap_end the popup overlaps the anchor, with the top-right corners of both the anchor and popup aligned. (since 3.6.3)

overlap_before the popup overlaps the anchor, with the bottom-left corners of both the anchor and popup aligned. (since 3.6.3)

overlap_after the popup overlaps the anchor, with the bottom-right corners of both the anchor and popup aligned. (since 3.6.3)

after_pointer the popup appears with the top aligned with the bottom of the anchor, with the topleft corner of the popup at the horizontal position of the mouse pointer.