Разрешить всплывающее окно Bootstrap4 на экране переполнения - PullRequest
Новая
       65

Разрешить всплывающее окно Bootstrap4 на экране переполнения

0 голосов
/ 21 октября 2018

Я пытаюсь использовать функцию поповера на основе Popper.js в BS4.

Я добавляю контент к нему динамически в показанном событии, и мне нужно, чтобы он оставался привязанным к кнопке запуска и позволял телупрокрутите вместо того, чтобы переходить к верхней части экрана, когда нет места для его содержимого.

Я действительно думал, этот ответ должен был быть в очереди, но, к сожалению, нет.

Следующие примеры были сделаны со статическим контентом, но я на самом деле заполняю поповер динамическим контентом при загрузке страницы, поэтому, пожалуйста, примите это во внимание в ваших ответах / комментариях.

thanx

Пример с небольшим содержанием 

$('#show-popover').popover({
        container: 'body',
        html: true,
        offset: 100,
        positionFixed: true
});
button{
  position: absolute;
  right: 0
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<button id="show-popover" data-placement="bottom" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="WANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

ПРИМЕР С МНОГИМ СОДЕРЖАНИЕМ 

$('#show-popover').popover({
        container: 'body',
        html: true,
        offset: 100,
        positionFixed: true
});

$('#show-popover').click(()=>{
  $('#explain').show();
});
button{
  position: absolute;
  right: 0
}

#explain{
position: absolute;
left: 0;
display: none
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<div id="explain">As you can see, it jumps to the top of the page, <br/>instead of staying anchored to the button</div>
<button id="show-popover" data-placement="bottom" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="UNWANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

1 Ответ

0 голосов
/ 21 октября 2018

Измените контейнер с тела на кнопку, к которой вы хотите прикрепить, и он отобразит всплывающее окно внутри кнопки.Затем вам придется немного изменить CSS, чтобы соответствовать вашим потребностям.Пример: 

$('#show-popover').popover({
        container: '#show-popover',
        html: true,
        offset: 100,
        positionFixed: true
});

$('#show-popover').click(()=>{
  $('#explain').show();
});
button{
  position: absolute;
  right: 10px;
  width: 200px;
}

button .arrow {left:50%; margin-left: -8px;}
button .popover {top: 20px !important;}

#explain{
position: absolute;
left: 0;
display: none
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<div id="explain">As you can see, it jumps to the top of the page, <br/>instead of staying anchored to the button</div>
<button id="show-popover"  data-placement="top" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="UNWANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
...