在弹出式显示和隐藏上遇到样式问题

having issue with styling on popover show and hide

本文关键字：遇到 样式 问题 隐藏 弹出式 显示      更新时间：2023-09-26

html 

<a class="popper btn" rel="popover" data-toggle="popover"><h3 class="gv layout">Layout Plan</h3> </a>
<div class="popper-content hide"> 
  <a href="pdf/layout1.pdf" target="_blank"><img src="images/layout1.jpg" class="btn"/></a> 
  <a href="pdf/layout2.pdf" target="_blank"><img src="images/layout2.jpg" class="btn"/></a> 
  <a href="pdf/layout3.pdf" target="_blank"><img src="images/layout3.jpg" class="btn"/></a> 
</div>

脚本：

$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
    return $(this).next('.popper-content').html();
}
});

我希望它在弹出式节目中执行，提前感谢任何人都可以找到这里的问题，

脚本：

$popover.on("show", function(e) {
    $("#transbg").css("padding-bottom","2600px");
});

下面的 ref 代码在小提琴中工作正常，但不适用于我的代码

   var $popover = $(".poper").popover({
    trigger: "click"
}).click(function(e) {
    e.$("#transbg").css("padding-bottom","260px"); 
});
$popover.on("hide", function(e) {
    $("#transbg").css("padding-bottom","50px");
});
弹

窗show事件语法不正确，可以试试以下几点吗

.HTML

<a class="poper btn" rel="popover" data-toggle="popover">
    <h3 class="gv layout">
        Layout Plan</h3>
</a>
<div class="popper-content hide">
    html
</div>

.JS

var abc = $('.poper').popover({
    placement: 'bottom',
    container: 'body',
    trigger: 'hover',
    html: true,
    content: function () {
       return $(this).next('.popper-content').html();
    }
});
abc.on("shown.bs.popover", function (e) {
  console.log("popover shown");
});
abc.on("hidden.bs.popover", function (e) {
  console.log("popover hidden");
});

琴师

请参阅此链接有关引导弹出框的信息

相关文章：