1

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

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

也x没有出现在最右边。它正在下降。我希望它出现在右上角或最右边。我不想使用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');
      }
    })
  })
})

演示

4

3 回答 3

2

尝试将此附加到您的脚本

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

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

于 2016-03-10T10:48:38.787 回答
0

看看这个JSFiddle

<div>Invalid</div>需要在极右端display: inline-block。X

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

onclick="$(this).hide(); $(this).parents(\'.popover\').hide()"
于 2016-03-10T10:49:14.033 回答
0

签出这个例子：

 <!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-10T11:17:07.827 回答