ポップアップ・メッセージ・ボックスの異なる位置の効果
2353 ワード
コードをzkDemoに配置してテストします.
赤の位置のオプションパラメータ: 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.
<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> 赤の位置のオプションパラメータ: