自舉彈出：使用回調來顯示/隱藏覆蓋 - 沒有工作

我有一個Web應用程序，我使用Bootstrap-彈出多次。這些popovers包含HTML並用於顯示小型表單等。這個想法是在顯示彈出窗口時用黑色透明疊加層「調暗」背景，以便最大限度地減少用戶的分心。我已經很容易地掌握了基礎知識，但是我真的無法按照自己的想法來實現。自舉彈出：使用回調來顯示/隱藏覆蓋 - 沒有工作

所需的功能是：無論何時按鈕觸發彈出窗口，覆蓋圖都應顯示在背景中，覆蓋頁面的其餘部分。當popover被解除時，通過它的保存按鈕，通過取消按鈕或通過再次點擊原始的觸發按鈕，覆蓋層應該再次隱藏。

這是我的代碼：

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>

主要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; 
}

主要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的顯示/隱藏來電，整個事情正常工作與觸發按鈕顯示警報相應：

$(".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通話觸發按鈕，將顯示第一個警報，然後疊加，而是觸發按鈕第二次點擊不會出現第二個警告和覆蓋不會隱瞞：

$(".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(); 
    });

可能有人請幫助我理解這是怎麼回事這裏？它讓我瘋狂！

來源

2015-10-18 Gentle Robot

我面對某種這之前...只是爲了幫助，如果它與您一起

在取消按鈕

，而不是.('hide');的酥料餅... 只是嘗試再次單擊原始按鈕如下圖所示。 ..

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

我希望它能幫助

還要檢查這個fiddle ....如果它有助於

來源

2015-10-18 18:19:10

嗯，我猜我湊ld試試，但取消按鈕是唯一可以正常工作的東西。 –

檢查小提琴是否有幫助......這只是你正在做的一個POC –

測試過它，並得到了與首先點擊觸發按鈕相同的結果。也就是說，覆蓋顯示，但從來沒有消失:(是的，小提琴的作品，但不是我的代碼。它必須是其他事情在我的代碼庫中，但我不知道什麼.. –

自舉彈出：使用回調來顯示/隱藏覆蓋 - 沒有工作

回答

相關問題