Bootstrap 4 поповер див - PullRequest
Новая
       21

Bootstrap 4 поповер див

0 голосов
/ 28 января 2020

Я хочу показать на кнопке всплывающее окно div сверху. И нажмите снаружи скрыть. HTML: 

<button class="pop-show" type="button">Show</button>

<div class="pop-inn">
    <p>content</p>
    <h5><img src="img.png" alt="image">Candidate</h5>
</div>

JS: 

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

1 Ответ

1 голос
/ 28 января 2020

Я предполагаю, что вы хотите, чтобы содержимое pop-inn div было тем, что отображается во всплывающем окне при нажатии кнопки?

Итак, есть несколько вещей, которые я изменил в рабочем фрагменте ниже. Во-первых, чтобы всплывающее окно можно было отклонять при нажатии за его пределами, это должен быть тег <a>, а не <button>, но вы можете стилизовать ссылки как кнопки (именно поэтому я добавил btn btn-primary классы.)

Затем я передал кучу опций методу .popover().

  1. html: true сообщает, что отображается html, а не простой текст.
  2. trigger: 'focus' говорит ему, чтобы он закрывал поповер, когда вы щелкаете за его пределами.
  3. content: говорит ему, что поместить в поповер. В этом случае я только что создал функцию, которая захватывает содержимое html элемента pop-inn. (Опция содержимого должна использовать функцию для возврата html, или вы получите ошибку).

Надеюсь, это поможет! 

$(function () {
  $(".pop-show").popover({
    html: true,
    trigger: "focus",
    content: function() {
      return $('.pop-inn').html();
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<a class="pop-show btn btn-primary" tabindex="0" type="button" style="margin:100px;" data-toggle="popover" title="Your Popover Title" data-content="">Show</a>

<div class="pop-inn" style="display:none;">
    <p>content</p>
    <h5><img src="img.png" alt="image">Candidate</h5>
</div>
...