Question

我正在尝试使用Balloon.js显示气球。

https://urin.github.io/jquery.balloon.js/

这是我的代码。

<div class="Wrap" style="background:#ccc; width:600px; height:1200px; margin:0 auto;">
    WRAP
    <div class="Bottom" id="target" style="position:fixed; bottom: 0; background:#ff69b4; height:100px; width:60px; margin-right:-360px;">Bottom</div>
</div>
<div id="balloon-image" style="display:none; bottom: 0px;">
    <img style="width: 90px; height: 47px;" src="https://i.imgur.com/Gcmy1AX.png">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./balloon.js"></script>
<script type="text/javascript">
    let balloonDiv = $('#balloon-image');
    let target = $('#target');
    let balloonSetting = {
        html: true,
        position: "right",
        offsetY: 20,
        tipSize: 0,
        css: null
    };
    balloonSetting.contents = balloonDiv.html();
    target.showBalloon(balloonSetting);
</script>

但是，气球是固定的，不会像下面的gif一样跟随“底部” div。

https://gfycat.com/CleverGenuineDoe

我希望气球跟随“底部” div。

但是“底部” div猫不会因为位置而改变位置：固定是一种规格。

我该怎么解决？

Answer 1

还要固定气球的位置。

 .my-balloon {
  position: fixed !important;
}

在Javascript中添加以下内容

$.balloon.defaults.classname = "my-balloon";
$.balloon.defaults.css = null;

示例代码可在下面找到

https://plnkr.co/edit/QmLfx2uH9WDX2eo06PcZ?p=preview

我正在尝试使用Balloon.js显示气球

1 个答案: