Question

我有一个网络应用程序，我多次使用Bootstrap-popovers。这些弹出窗口包含HTML，用于显示小型表格等。这个想法是每当显示一个弹出窗口时用黑色透明覆盖层“暗淡”背景，以便最大限度地减少用户的干扰。我已经非常轻松地掌握了基础知识，但我真的无法让它按照我的意愿工作。

所需的功能是：每当按钮触发弹出窗口时，叠加层应显示在背景中，覆盖页面的其余部分。当弹出窗口被解除时，无论是通过它的保存按钮，通过取消按钮还是再次点击原始触发按钮，叠加层将再次隐藏。

这是我的代码：

HTML

<html>
<head>

// loading bootstrap.css
// loading main.css
// loading jquery.min.js
// loading bootstrap.min.js
// loading main.js

</head>

<body>
<div class="fadeMe" style="display:none"></div>

// ...lots of content

<div id="newReward" class="reward-markup edit-area">
    <a href="#!" id="addRewardBtn" class="btn btn-primary trigger">
        ADD REWARD
    </a>

    <div class="head hide">
        <h4>NEW REWARD</h4>
    </div>
    <div class="content hide">

     // ...small HTML-Form which works fine

        <button class="btn btn-warning pull-left" onclick="$('.popover').popover('hide');">CANCEL</button>
        <button class="btn btn-warning pull-right" onclick="addReward()">SAVE</button>

    </div>
</div>

</body>
</html>

MAIN CSS

.fadeMe
{
  opacity:0.7;
  filter: alpha(opacity=20);
  background-color:#000;
  width:100%;
  height:100%;
  z-index:1;
  top:0;
  left:0;
  position:fixed;
}

MAIN JS

$(function(){

    $(".trigger").on('show.bs.popover', function(){
        $("div.fadeMe").show();
    });
    $(".trigger").on('hidden.bs.popover', function(){
        $("div.fadeMe").hide();
    });

});

$('.reward-markup > .trigger').popover({
    html: true,
    title: function () {
        return $(this).parent().find('.head').html();
    },
    content: function () {

        return $(this).parent().find('.content').html();
    },
    container: 'body',
    placement: 'bottom'
});

这不行。触发弹出窗口会显示叠加层，但是使用原始触发按钮解除弹出窗口会离开叠加层而不会隐藏它，然后完全破坏弹出窗口功能（取消按钮功能应该如此）。但奇怪的是，如果你用简单的警报补充jquery show / hide调用，整个过程可以正常工作，触发按钮会相应地显示警告：

$(".trigger").on('show.bs.popover', function(){
        alert('The popover is about to show.');
    });
$(".trigger").on('hide.bs.popover', function(){
        alert('The popover is now hidden.');
    });

更奇怪的是：如果您添加两个警报和jquery-calls触发按钮将显示第一个警报然后再显示覆盖，但第二次点击触发按钮将不会显示第二个警报和覆盖不会隐藏：

$(".trigger").on('show.bs.popover', function(){
        alert('The popover is about to show.');
        $("div.fadeMe").show();
    });
$(".trigger").on('hide.bs.popover', function(){
        alert('The popover is now hidden.');
        $("div.fadeMe").hide();
    });

有人可以帮我理解这里发生了什么吗？它让我疯了！

Answer 1

我之前遇到过某种情况......只是为了帮助它，如果它适合你

在取消按钮而不是.('hide'); popover ... 只需尝试再次单击原始按钮，如下所示......

<button class="btn btn-warning pull-left" onclick="$('.reward-markup > .trigger').click()">CANCEL</button>

我希望它有所帮助

还要检查此fiddle ....如果有帮助

Bootstrap popovers：使用回调来显示/隐藏覆盖 - 不起作用

1 个答案: