Я пытаюсь показать шар, используя balloon.js - PullRequest
Новая
       36

Я пытаюсь показать шар, используя balloon.js

0 голосов
/ 04 мая 2019

Я пытаюсь показать шар, используя 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>

Но воздушный шар зафиксирован и не следует за нижним делом, как показано на следующем рисунке.

https://gfycat.com/CleverGenuineDoe

Я хочу, чтобы воздушный шар следовал за нижним разделением.

Но div 'Bottom' не может изменить позицию из-за позиции: исправлено - это спецификация.

Что мне решить?

1 Ответ

1 голос
/ 05 мая 2019

делает положение воздушного шара также фиксированным. 

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

добавьте следующее в Javascript 

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

Пример кода можно найти ниже

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

...