無法關閉引導彈出窗口

我無法使用jquery關閉彈出窗口。當用戶輸入1以外的值作爲輸入時，彈出窗口出現。無法關閉引導彈出窗口

我需要使用x符號來關閉特定的彈出窗口。

而且x沒有出現在極端right.It是怎麼回事就弄傷希望它出現在右上角或極端right.And我不想使用title爲酥料餅

<br/> 
<br/> 
<br/> 
<input type="text" class="check" /> 
<input type="text" class="check" /> 
<input type="text" class="check" /> 
<input type="text" class="check" /> 
<input type="button" id="Save" value="Save" />

JQuery的

$(document).ready(function() { 
var elem ='<div>Invalid</div>'+'<button class="close pull-right" data-dismiss="popover" onclick="$(this).popover(&quot;hide&quot;);">&times;</button>'; 
    $("#Save").click(function() { 
    $(".check").each(function() { 
     $val = $(this).val(); 
     if ($val != 1) {  
     $(this).popover({ 
      content: elem, 
      html:true 
     }); 
     $(this).popover('show'); 
     } 
    }) 
    }) 
})

DEMO

來源

2016-03-10 Raviteja

看看這個JSFiddle

的<div>Invalid</div>需要display: inline-block爲X是在最右邊。

要隱藏酥料餅，我改變了onclick作用於以下內容：

onclick="$(this).hide(); $(this).parents(\'.popover\').hide()"

來源

2016-03-10 10:49:14 Druzion

嘗試添加該喲烏爾腳本

$('body').on('click','.close',function(){ 
    $(this).closest('.popover').hide(); 
});

的jsfiddle：http://jsfiddle.net/bqo5mdcz/11/

來源

2016-03-10 10:48:38 madalinivascu

結帳這個例子：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Example of Bootstrap Popover with Close Button</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('[data-toggle="popover"]').popover({ 
      placement : 'top', 
      html : true, 
      title : 'User Info <a href="#" class="close" data-dismiss="alert">×</a>', 
      content : '<div class="media"><a href="#" class="pull-left"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>' 
     }); 
     $(document).on("click", ".popover .close" , function(){ 
      $(this).parents(".popover").popover('hide'); 
     }); 
    }); 
    </script> 
    <style type="text/css"> 
     .bs-example{ 
      margin: 200px 150px 0; 
     } 
     .popover-title .close{ 
      position: relative; 
      bottom: 3px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="bs-example"> 
     <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button> 
    </div> 
    </body> 
    </html>

您可以在這裏看到活生生的例子 - http://www.tutorialrepublic.com/codelab.php?topic=faq&file=bootstrap-add-close-button-to-popover

來源

2016-03-10 11:17:07 Alex

無法關閉引導彈出窗口

回答

相關問題