# 动态设置semantic-ui弹出层popup的内容

**URL:** <https://www.shiqidu.com/t/topic/425>\
**Category:** 开发调优\
**Tags:** JavaScript\
**Created:** [2018 年5 月 20 日 16:36 UTC](https://www.shiqidu.com/t/topic/425 "2018-05-20T16:36:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

作者： ![Leon](https://www.shiqidu.com/user_avatar/www.shiqidu.com/leon/32/5_2.png) [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2018 年5 月 20 日 16:36 UTC](https://www.shiqidu.com/t/topic/425/1 "2018-05-20T16:36:24Z")

</div>

关于popup官方的demo比较简单，显示一个固定内容的弹出层。

```html
<div class="ui icon button" data-content="Add users to your feed">
  <i class="add icon"></i>
</div>

```

效果图如下

![alttext](https://discourse.shiqidu.com/upload/discussion/20180521/901d3503e73ed508bd51591d22ad9ea3_origin.png)

但是有时候我们希望popup的content是动态的，比如从服务器api获取。

这时就需要用到popup的callback了。

```javascript
var popupLoading = '<i class="notched circle loading icon teal"></i>';
    $('[rel=author]').popup({
        hoverable : true,
        exclusive: true,
        delay: {
            show: 400,
            hide: 400
        },
        html: popupLoading,
        variation: 'wide',
        onShow: function (el) {
            var popup = this;
            popup.html(popupLoading);
            $.ajax({
                url: '/user_summary',
                data: {uid: $(el).data('uid')},
                method: 'post'
            }).done(function(result) {
                popup.html(result);
            }).fail(function() {
                popup.html('error');
            });
        }
    });

```

---

<div class="post-metadata">

作者： ![yang-0724](https://www.shiqidu.com/letter_avatar_proxy/v4/letter/y/e99b99/32.png) [@yang-0724](https://www.shiqidu.com/u/yang-0724)\
发布日期： [2019 年10 月 14 日 01:57 UTC](https://www.shiqidu.com/t/topic/425/2 "2019-10-14T01:57:03Z")

</div>

怎么可以把弹出层popup的方向改变向右呀？

---

<div class="post-metadata">

作者： ![Leon](https://www.shiqidu.com/user_avatar/www.shiqidu.com/leon/32/5_2.png) [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2019 年10 月 14 日 02:45 UTC](https://www.shiqidu.com/t/topic/425/3 "2019-10-14T02:45:28Z")

</div>

加个属性 data-position=“right center”

---

<div class="post-metadata">

作者： ![yang-0724](https://www.shiqidu.com/letter_avatar_proxy/v4/letter/y/e99b99/32.png) [@yang-0724](https://www.shiqidu.com/u/yang-0724)\
发布日期： [2019 年10 月 14 日 04:00 UTC](https://www.shiqidu.com/t/topic/425/4 "2019-10-14T04:00:50Z")

</div>

他就变成这样了

---

<div class="post-metadata">

作者： ![Leon](https://www.shiqidu.com/user_avatar/www.shiqidu.com/leon/32/5_2.png) [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2019 年10 月 14 日 05:48 UTC](https://www.shiqidu.com/t/topic/425/5 "2019-10-14T05:48:32Z")

</div>

你这个弹出的内容太大了吧，往下不行吗？

---

<div class="post-metadata">

作者： ![yang-0724](https://www.shiqidu.com/letter_avatar_proxy/v4/letter/y/e99b99/32.png) [@yang-0724](https://www.shiqidu.com/u/yang-0724)\
发布日期： [2019 年10 月 17 日 02:57 UTC](https://www.shiqidu.com/t/topic/425/6 "2019-10-17T02:57:50Z")

</div>

改小了也不行 其他都正常就这个不行 所以我就想说问问 怎样可以让内容像左会不会好点

---

<div class="post-metadata">

作者： ![Leon](https://www.shiqidu.com/user_avatar/www.shiqidu.com/leon/32/5_2.png) [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2019 年10 月 17 日 05:41 UTC](https://www.shiqidu.com/t/topic/425/7 "2019-10-17T05:41:46Z")

</div>

你这个是不是往下比较合适？data-position=“bottom center”