无法关闭引导弹出窗口

我无法使用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

无法关闭引导弹出窗口

回答

相关问题