Question

我无法使用jquery关闭popover。当用户输入1以外的输入作为输入时，会出现弹出窗口。

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

同样x没有出现在最右边。它正在下降。我希望它出现在顶角或最右边。我不想使用{ {1}}用于popover

title

JQuery的

<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" />

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 popover

3 个答案: