Bootstrap всплывающее окно, содержащее html ссылки, отображаемые только один раз - PullRequest
Новая
       36

Bootstrap всплывающее окно, содержащее html ссылки, отображаемые только один раз

0 голосов
/ 21 марта 2020

Это мой первый вопрос здесь, я искал на stackoverflow, но не смог найти правильный ответ.

Итак, я реализовал bootstrap popover, контент которого отображается только при первый клик. Моя проблема возникает, когда я открываю этот поповер во второй раз: содержимое не отображается.

Вот код html: 

    <a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
        yolo
    </a>

    <div id="clickGoogle" style="display:none;" class="open_modal">
        <a href="javascript:void(0);" data-href="add_banner.php?id=<?php echo $membre['id'];?>" class="openPopup" style="text-decoration: none">Change banner</a><hr>
        <a href="javascript:void(0);" data-href="add_profile.php?id=<?php echo $membre['id'];?>" class="openPopup" style="text-decoration: none">Change avatar</a><hr>
        <a href="javascript:void(0);" data-href="settings.php" class="openPopup" style="text-decoration: none">Edit profile</a>
    </div>

, за которым следует код JS: 

$(function() { 
  $('[data-toggle="popover"]').popover({
      html:true,
      content : function() {
        $('#clickGoogle').css({'display':'block'});
        return $('#clickGoogle');
      }        
    });
});

Я не понимаю, ПОЧЕМУ #clickGoogle не появляется, когда я хочу открыть поповер еще раз ... ??

Надеюсь, я достаточно ясно в моих объяснениях, если нет, скажите мне!

Спасибо за вашу помощь в этом;) 

<!doctype html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<script>
$(function() { 
  $('[data-toggle="popover"]').popover({
      html:true,
      content : function() {
        $('#clickGoogle').css({'display':'block'});
        return $('#clickGoogle');
      }        
    });
});
</script>

</head>
<body>
<a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
  yolo
</a>


<div id="clickGoogle" style="display:none;" class="open_modal">
  <a href="javascript:void(0);" data-href="add_banner.php?id=<?php echo $membre['id'];?>" class="openPopup" style="text-decoration: none">Change banner</a><hr>
  <a href="javascript:void(0);" data-href="add_profile.php?id=<?php echo $membre['id'];?>" class="openPopup" style="text-decoration: none">Change avatar</a><hr>
  <a href="javascript:void(0);" data-href="settings.php" class="openPopup" style="text-decoration: none">Edit profile</a>
</div>
</body>
</html

РЕДАКТИРОВАТЬ:

Предоставленное решение работает, но в то же время деактивирует ссылки, поэтому я ищу другое решение

1 Ответ

0 голосов
/ 21 марта 2020

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

Чтобы исправить это, я просто возвратил HTML элемента, используя Jquery функцию html(), а не сам элемент.

Обратите внимание, что вам больше не нужно менять css. 

<!doctype html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<script>
$(function() { 
  $('[data-toggle="popover"]').popover({
      html:true,
      content : function() {
        return $('#clickGoogle').html();
      }        
    });
});
</script>

</head>
<body>
<a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
  yolo
</a>


<div id="clickGoogle" style="display:none;" class="open_modal">
  <a href="javascript:void(0);" data-href="add_banner.php?id=<?php echo $membre['id'];?>" class="openPopup" style="text-decoration: none">Change banner</a><hr>
  <a href="javascript:void(0);" data-href="add_profile.php?id=<?php echo $membre['id'];?>" class="openPopup" style="text-decoration: none">Change avatar</a><hr>
  <a href="https://google.com/" data-href="settings.php" class="openPopup" style="text-decoration: none">Edit profile</a>
</div>
</body>
</html
...