无法关闭 bootstrap 弹出窗口

Question

我无法使用 jquery.When 用户输入非 1 作为输入，然后弹出窗口出现。jquery.When 我无法关闭弹出窗口。

我需要使用 x 符号关闭特定的弹出窗口。

另外x不出现在极点right.It要去down.I希望它出现在顶角或极点right.And我不想将 title 用于 popover

<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

Answer 1

尝试将其附加到您的脚本中

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

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

Answer 2

看看这个 JSFiddle

<div>Invalid</div> 需要 display: inline-block 才能使 X 位于极右。

为了隐藏弹出窗口，我将 onclick 操作更改为以下内容：

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

Answer 3

检查这个例子：

 <!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

无法关闭 bootstrap 弹出窗口

Unable to close bootstrap popover

jquery

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-popover