1# popup<a name="ZH-CN_TOPIC_0000001164290708"></a> 2 3气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。 4 5## 权限列表<a name="zh-cn_topic_0000001127284822_section11257113618419"></a> 6 7无 8 9## 子组件<a name="zh-cn_topic_0000001127284822_s726c642d8f514b0cb5ef8854fe6ac02c"></a> 10 11支持单个子组件节点<sup>5+</sup>。 12 13## 属性<a name="zh-cn_topic_0000001127284822_s7ff9da9346504b11aca7015dc689dc67"></a> 14 15除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ 16 17<a name="zh-cn_topic_0000001127284822_table20633101642315"></a> 18<table><thead align="left"><tr id="zh-cn_topic_0000001127284822_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127284822_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001127284822_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001127284822_aa872998ac2d84843a3c5161889afffef"></a>名称</p> 19</th> 20<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127284822_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001127284822_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001127284822_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p> 21</th> 22<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127284822_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001127284822_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001127284822_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p> 23</th> 24<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127284822_p824610360217"><a name="zh-cn_topic_0000001127284822_p824610360217"></a><a name="zh-cn_topic_0000001127284822_p824610360217"></a>必填</p> 25</th> 26<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127284822_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001127284822_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001127284822_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 27</th> 28</tr> 29</thead> 30<tbody><tr id="zh-cn_topic_0000001127284822_row679154543116"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284822_p15904153153119"><a name="zh-cn_topic_0000001127284822_p15904153153119"></a><a name="zh-cn_topic_0000001127284822_p15904153153119"></a>target</p> 31</td> 32<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284822_p6904205312310"><a name="zh-cn_topic_0000001127284822_p6904205312310"></a><a name="zh-cn_topic_0000001127284822_p6904205312310"></a>string</p> 33</td> 34<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284822_p79041853123118"><a name="zh-cn_topic_0000001127284822_p79041853123118"></a><a name="zh-cn_topic_0000001127284822_p79041853123118"></a>-</p> 35</td> 36<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284822_p4904153173110"><a name="zh-cn_topic_0000001127284822_p4904153173110"></a><a name="zh-cn_topic_0000001127284822_p4904153173110"></a>是</p> 37</td> 38<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284822_p9904155363115"><a name="zh-cn_topic_0000001127284822_p9904155363115"></a><a name="zh-cn_topic_0000001127284822_p9904155363115"></a>目标元素的id属性值，不支持动态切换。</p> 39</td> 40</tr> 41<tr id="zh-cn_topic_0000001127284822_row17485184243110"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284822_p11904175316315"><a name="zh-cn_topic_0000001127284822_p11904175316315"></a><a name="zh-cn_topic_0000001127284822_p11904175316315"></a>placement</p> 42</td> 43<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284822_p1390413531314"><a name="zh-cn_topic_0000001127284822_p1390413531314"></a><a name="zh-cn_topic_0000001127284822_p1390413531314"></a>string</p> 44</td> 45<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284822_p390465317319"><a name="zh-cn_topic_0000001127284822_p390465317319"></a><a name="zh-cn_topic_0000001127284822_p390465317319"></a>bottom</p> 46</td> 47<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284822_p1990415317319"><a name="zh-cn_topic_0000001127284822_p1990415317319"></a><a name="zh-cn_topic_0000001127284822_p1990415317319"></a>否</p> 48</td> 49<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284822_p1990410531316"><a name="zh-cn_topic_0000001127284822_p1990410531316"></a><a name="zh-cn_topic_0000001127284822_p1990410531316"></a>弹出窗口位置。可选值为：</p> 50<a name="zh-cn_topic_0000001127284822_ul1190565393119"></a><a name="zh-cn_topic_0000001127284822_ul1190565393119"></a><ul id="zh-cn_topic_0000001127284822_ul1190565393119"><li>left：位于目标元素左边；</li><li>right：位于目标元素右边；</li><li>top：位于目标元素上边；</li><li>bottom：位于目标元素下边；</li><li>topLeft：位于目标元素左上角；</li><li>topRight：位于目标元素右上角；</li><li>bottomLeft：位于目标元素左下角；</li><li>bottomRight：位于目标元素右下角。</li></ul> 51</td> 52</tr> 53<tr id="zh-cn_topic_0000001127284822_row5684114975"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284822_p156851846718"><a name="zh-cn_topic_0000001127284822_p156851846718"></a><a name="zh-cn_topic_0000001127284822_p156851846718"></a>keepalive<sup id="zh-cn_topic_0000001127284822_sup7289771114"><a name="zh-cn_topic_0000001127284822_sup7289771114"></a><a name="zh-cn_topic_0000001127284822_sup7289771114"></a><span>5+</span></sup></p> 54</td> 55<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284822_p13685642077"><a name="zh-cn_topic_0000001127284822_p13685642077"></a><a name="zh-cn_topic_0000001127284822_p13685642077"></a>boolean</p> 56</td> 57<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284822_p16685164777"><a name="zh-cn_topic_0000001127284822_p16685164777"></a><a name="zh-cn_topic_0000001127284822_p16685164777"></a>false</p> 58</td> 59<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284822_p1068513410710"><a name="zh-cn_topic_0000001127284822_p1068513410710"></a><a name="zh-cn_topic_0000001127284822_p1068513410710"></a>否</p> 60</td> 61<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284822_p10685144771"><a name="zh-cn_topic_0000001127284822_p10685144771"></a><a name="zh-cn_topic_0000001127284822_p10685144771"></a>设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。</p> 62</td> 63</tr> 64<tr id="zh-cn_topic_0000001127284822_row99782190913"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284822_p397971910920"><a name="zh-cn_topic_0000001127284822_p397971910920"></a><a name="zh-cn_topic_0000001127284822_p397971910920"></a>clickable<sup id="zh-cn_topic_0000001127284822_sup143370106114"><a name="zh-cn_topic_0000001127284822_sup143370106114"></a><a name="zh-cn_topic_0000001127284822_sup143370106114"></a><span>5+</span></sup></p> 65</td> 66<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284822_p149793191095"><a name="zh-cn_topic_0000001127284822_p149793191095"></a><a name="zh-cn_topic_0000001127284822_p149793191095"></a>boolean</p> 67</td> 68<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284822_p197981917920"><a name="zh-cn_topic_0000001127284822_p197981917920"></a><a name="zh-cn_topic_0000001127284822_p197981917920"></a>true</p> 69</td> 70<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284822_p1197914193916"><a name="zh-cn_topic_0000001127284822_p1197914193916"></a><a name="zh-cn_topic_0000001127284822_p1197914193916"></a>否</p> 71</td> 72<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284822_p39792192095"><a name="zh-cn_topic_0000001127284822_p39792192095"></a><a name="zh-cn_topic_0000001127284822_p39792192095"></a>popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。</p> 73</td> 74</tr> 75<tr id="zh-cn_topic_0000001127284822_row94796310119"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284822_p174804313111"><a name="zh-cn_topic_0000001127284822_p174804313111"></a><a name="zh-cn_topic_0000001127284822_p174804313111"></a>arrowoffset<sup id="zh-cn_topic_0000001127284822_sup1520573571311"><a name="zh-cn_topic_0000001127284822_sup1520573571311"></a><a name="zh-cn_topic_0000001127284822_sup1520573571311"></a><span>5+</span></sup></p> 76</td> 77<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284822_p1948053131110"><a name="zh-cn_topic_0000001127284822_p1948053131110"></a><a name="zh-cn_topic_0000001127284822_p1948053131110"></a><length></p> 78</td> 79<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284822_p6480831191117"><a name="zh-cn_topic_0000001127284822_p6480831191117"></a><a name="zh-cn_topic_0000001127284822_p6480831191117"></a>0</p> 80</td> 81<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284822_p8480153151112"><a name="zh-cn_topic_0000001127284822_p8480153151112"></a><a name="zh-cn_topic_0000001127284822_p8480153151112"></a>否</p> 82</td> 83<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284822_p548093131119"><a name="zh-cn_topic_0000001127284822_p548093131119"></a><a name="zh-cn_topic_0000001127284822_p548093131119"></a>popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。</p> 84</td> 85</tr> 86</tbody> 87</table> 88 89> **说明：** 90>- 不支持focusable属性。 91 92## 样式<a name="zh-cn_topic_0000001127284822_s472a5052130e49bca059adfe7bb6b96d"></a> 93 94除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 95 96<a name="zh-cn_topic_0000001127284822_table9160202272017"></a> 97<table><thead align="left"><tr id="zh-cn_topic_0000001127284822_row15160122212204"><th class="cellrowborder" valign="top" width="12.688731126887312%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127284822_p5160182214208"><a name="zh-cn_topic_0000001127284822_p5160182214208"></a><a name="zh-cn_topic_0000001127284822_p5160182214208"></a>名称</p> 98</th> 99<th class="cellrowborder" valign="top" width="10.47895210478952%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127284822_p0160122232018"><a name="zh-cn_topic_0000001127284822_p0160122232018"></a><a name="zh-cn_topic_0000001127284822_p0160122232018"></a>类型</p> 100</th> 101<th class="cellrowborder" valign="top" width="8.60913908609139%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127284822_p13160152232015"><a name="zh-cn_topic_0000001127284822_p13160152232015"></a><a name="zh-cn_topic_0000001127284822_p13160152232015"></a>默认值</p> 102</th> 103<th class="cellrowborder" valign="top" width="6.28937106289371%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127284822_p101617229209"><a name="zh-cn_topic_0000001127284822_p101617229209"></a><a name="zh-cn_topic_0000001127284822_p101617229209"></a>必填</p> 104</th> 105<th class="cellrowborder" valign="top" width="61.933806619338064%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127284822_p1616162216202"><a name="zh-cn_topic_0000001127284822_p1616162216202"></a><a name="zh-cn_topic_0000001127284822_p1616162216202"></a>描述</p> 106</th> 107</tr> 108</thead> 109<tbody><tr id="zh-cn_topic_0000001127284822_row191611622172010"><td class="cellrowborder" valign="top" width="12.688731126887312%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284822_p1816142292013"><a name="zh-cn_topic_0000001127284822_p1816142292013"></a><a name="zh-cn_topic_0000001127284822_p1816142292013"></a>mask-color</p> 110</td> 111<td class="cellrowborder" valign="top" width="10.47895210478952%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284822_p516152217201"><a name="zh-cn_topic_0000001127284822_p516152217201"></a><a name="zh-cn_topic_0000001127284822_p516152217201"></a><color></p> 112</td> 113<td class="cellrowborder" valign="top" width="8.60913908609139%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284822_p11161102218207"><a name="zh-cn_topic_0000001127284822_p11161102218207"></a><a name="zh-cn_topic_0000001127284822_p11161102218207"></a>-</p> 114</td> 115<td class="cellrowborder" valign="top" width="6.28937106289371%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284822_p8161162282014"><a name="zh-cn_topic_0000001127284822_p8161162282014"></a><a name="zh-cn_topic_0000001127284822_p8161162282014"></a>否</p> 116</td> 117<td class="cellrowborder" valign="top" width="61.933806619338064%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284822_p1416162202014"><a name="zh-cn_topic_0000001127284822_p1416162202014"></a><a name="zh-cn_topic_0000001127284822_p1416162202014"></a>遮罩层的颜色，默认值为全透明。</p> 118</td> 119</tr> 120</tbody> 121</table> 122 123> **说明：** 124>- 不支持position相关样式。 125 126## 事件<a name="zh-cn_topic_0000001127284822_section1295913853210"></a> 127 128除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 129 130<a name="zh-cn_topic_0000001127284822_table836435619510"></a> 131<table><thead align="left"><tr id="zh-cn_topic_0000001127284822_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127284822_a426b8903842d48fa8012a24ff3c997eb"><a name="zh-cn_topic_0000001127284822_a426b8903842d48fa8012a24ff3c997eb"></a><a name="zh-cn_topic_0000001127284822_a426b8903842d48fa8012a24ff3c997eb"></a>名称</p> 132</th> 133<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127284822_a53448ba47e5e4ae9bf7774c90820e970"><a name="zh-cn_topic_0000001127284822_a53448ba47e5e4ae9bf7774c90820e970"></a><a name="zh-cn_topic_0000001127284822_a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p> 134</th> 135<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127284822_add489ff50c444f24b759162c7f4bad9a"><a name="zh-cn_topic_0000001127284822_add489ff50c444f24b759162c7f4bad9a"></a><a name="zh-cn_topic_0000001127284822_add489ff50c444f24b759162c7f4bad9a"></a>描述</p> 136</th> 137</tr> 138</thead> 139<tbody><tr id="zh-cn_topic_0000001127284822_row84115915325"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127284822_p1458817720332"><a name="zh-cn_topic_0000001127284822_p1458817720332"></a><a name="zh-cn_topic_0000001127284822_p1458817720332"></a>visibilitychange</p> 140</td> 141<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127284822_p115888783316"><a name="zh-cn_topic_0000001127284822_p115888783316"></a><a name="zh-cn_topic_0000001127284822_p115888783316"></a>{ visibility: boolean }</p> 142</td> 143<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127284822_p558817173314"><a name="zh-cn_topic_0000001127284822_p558817173314"></a><a name="zh-cn_topic_0000001127284822_p558817173314"></a>当气泡弹出和消失时会触发该回调函数。</p> 144</td> 145</tr> 146</tbody> 147</table> 148 149## 方法<a name="zh-cn_topic_0000001127284822_section1970516568131"></a> 150 151仅支持如下方法： 152 153<a name="zh-cn_topic_0000001127284822_table20753173210251"></a> 154<table><thead align="left"><tr id="zh-cn_topic_0000001127284822_row575363214257"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127284822_p157531032112517"><a name="zh-cn_topic_0000001127284822_p157531032112517"></a><a name="zh-cn_topic_0000001127284822_p157531032112517"></a>名称</p> 155</th> 156<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127284822_p77531632132518"><a name="zh-cn_topic_0000001127284822_p77531632132518"></a><a name="zh-cn_topic_0000001127284822_p77531632132518"></a>参数</p> 157</th> 158<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127284822_p147531232132512"><a name="zh-cn_topic_0000001127284822_p147531232132512"></a><a name="zh-cn_topic_0000001127284822_p147531232132512"></a>描述</p> 159</th> 160</tr> 161</thead> 162<tbody><tr id="zh-cn_topic_0000001127284822_row15753113210251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127284822_p2314135812511"><a name="zh-cn_topic_0000001127284822_p2314135812511"></a><a name="zh-cn_topic_0000001127284822_p2314135812511"></a>show<sup id="zh-cn_topic_0000001127284822_sup969153720142"><a name="zh-cn_topic_0000001127284822_sup969153720142"></a><a name="zh-cn_topic_0000001127284822_sup969153720142"></a><span>5+</span></sup></p> 163</td> 164<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127284822_p7314115819256"><a name="zh-cn_topic_0000001127284822_p7314115819256"></a><a name="zh-cn_topic_0000001127284822_p7314115819256"></a>-</p> 165</td> 166<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127284822_p0314958162512"><a name="zh-cn_topic_0000001127284822_p0314958162512"></a><a name="zh-cn_topic_0000001127284822_p0314958162512"></a>弹出气泡提示。</p> 167</td> 168</tr> 169<tr id="zh-cn_topic_0000001127284822_row393410526251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127284822_p7314358182512"><a name="zh-cn_topic_0000001127284822_p7314358182512"></a><a name="zh-cn_topic_0000001127284822_p7314358182512"></a>hide<sup id="zh-cn_topic_0000001127284822_sup16463154010141"><a name="zh-cn_topic_0000001127284822_sup16463154010141"></a><a name="zh-cn_topic_0000001127284822_sup16463154010141"></a>5+</sup></p> 170</td> 171<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127284822_p1231455814253"><a name="zh-cn_topic_0000001127284822_p1231455814253"></a><a name="zh-cn_topic_0000001127284822_p1231455814253"></a>-</p> 172</td> 173<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127284822_p10314105842512"><a name="zh-cn_topic_0000001127284822_p10314105842512"></a><a name="zh-cn_topic_0000001127284822_p10314105842512"></a>取消气泡提示。</p> 174</td> 175</tr> 176</tbody> 177</table> 178 179> **说明：** 180>1. popup气泡弹窗属性、样式均不支持动态更新。 181>2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。 182>3. popup的border四边样式需一致，若四边设置不一致且圆角为零，则按左、上、右、下的顺序取第一个被设置的样式，否则border不生效。 183>4. popup的target组件的click事件不生效。 184 185## 示例<a name="zh-cn_topic_0000001127284822_section29231018162418"></a> 186 187``` 188<!-- xxx.hml --> 189<div class="container"> 190 <text id="text">Click to show the pop-up</text> 191 <!-- popup supports single child of any type5+ --> 192 <popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true" arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup"> 193 <text class="text">Text content of the pop-up</text> 194 </popup> 195 <button class="button" onclick="showpopup">Click to show the pop-up</button> 196</div> 197``` 198 199``` 200/* xxx.css */ 201.container { 202 flex-direction: column; 203 align-items: center; 204 padding-top: 200px; 205} 206.popup { 207 mask-color: gray; 208} 209.text { 210 color: white; 211} 212.button { 213 width: 220px; 214 height: 70px; 215 margin-top: 50px; 216} 217``` 218 219``` 220// xxx.js 221import prompt from '@system.prompt' 222export default { 223 visibilitychange(e) { 224 prompt.showToast({ 225 message: 'visibility change visibility: ' + e.visibility, 226 duration: 3000, 227 }); 228 }, 229 showpopup() { 230 this.$element("popup").show(); 231 }, 232 hidepopup() { 233 this.$element("popup").hide(); 234 }, 235} 236``` 237 238 239 240
