弹出消息框的不同位置效果

将代码放到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.