如何通過單擊彈出窗口內的按鈕來關閉Bootstrap彈出窗口

Question

不幸的是，我正努力在單擊窗體html按鈕時彈出Bootstrap彈出窗口（該窗口在我的頁面上打開特定位置）本身）。我知道有類似的問題，並相信我我已經嘗試了一些相關的解決方案無濟於事...

我有以下Javascript代碼用於在特定元素的頁面上打開引導程序彈窗：

setTimeout(function(){$('#bob').popover({ 

    title:"Reaction", 
    html:true, 
    content:html 

}).popover('show')}, 1000); 

// If a popover is open then can execute the following Javascript. Need to detect also which step clicked on... 
$('#bob').on('shown.bs.popover', function() {    

    var close = document.getElementById("yes"); 

    // if close button is clicked... 
    close.addEventListener("click", function(){ 

     event.preventDefault(); 

     console.log("close button clicked");   

     $('#bob').popover('hide'); 

    }): 

}); 

爲酥料餅中的按鈕相關的HTML如下：

<button id ="yes" data-toggle="clickover" class = "btn btn-small btn-primary pull-right">Yes</button> 

不幸的是，上述方法無效。

我也看了其他的答案/對於這個問題的解決方案，並已經嘗試以下無濟於事：

<button id ="yes" data-toggle="clickover" class = "btn btn-small btn-primary pull-right" onclick="event.preventDefault(); $(&quot;id&quot;).popover(&quot;hide&quot;);">Yes</button> 

我將不勝感激，如果有人可以給我一些線索/提示如何我可以得到這個工作。

親切的問候

Answer 1

代碼本身有錯誤。您忘記在ID選擇器之前添加＃＃

//如果彈出窗口打開，則可以執行以下Javascript。也需要哪一步點擊，檢測...

$("#"+id).on('shown.bs.popover', function() {    

    var close = document.getElementById("yes"); 

    // if close button is clicked... 
    close.addEventListener("click", function(){ 

     event.preventDefault(); 

     console.log("close button clicked");   


     $("#"+id).popover('hide'); 

    }): 

}); 

Answer 2

第一件事 - 錯誤：

1. 有一個冒號，而不是在從 結束第三行的末尾分號，

2. 這裏

   close.addEventListener("click", function(){ 
   
       event.preventDefault(); 
   

你忘了把'event'放在函數參數中。

而主要問題：您正嘗試儘快指定事件處理程序'shown.bs.popover'。把它document.ready應該解決的問題

setTimeout(function(){$('#bob').popover({ 

    title:"Reaction", 
    html:true, 
    content:html 

}).popover('show')}, 1000); 

$(function(){//<---ADD THIS 
    // If a popover is open then can execute the following Javascript. Need to detect also which step clicked on... 
    $('#bob').on('shown.bs.popover', function() {    

     var close = document.getElementById("yes"); 

     // if close button is clicked... 
     close.addEventListener("click", function(event){ 

      event.preventDefault(); 

      console.log("close button clicked");   

      $('#bob').popover('hide'); 

     }); 

    }); 
});//<---ADD THIS 

如果使用setTimeout出於同樣的原因（沒有它$('#bob').popover()不工作），通過它puttin到document.ready塊太大改變。不要依靠setTimeout。