是否可以在单击其他按钮时显示按钮的引导弹出框

Is it possible to show Bootstrap popover of a button on the click on of other button?

本文关键字：按钮 显示 单击 其他 是否      更新时间：2023-09-26

我正在尝试找到一种手动显示弹出框的方法，而不是在单击元素时显示弹出窗口。

下面给出的代码片段显示两个按钮。

    单击

  1. 我：单击时显示弹出框。（这不应该发生）

    2. 显示

  2. 单击我弹出框：这应该显示click me的弹出框。

    简介：单击button2时在button1上显示弹出框，但在单击button1时不显示弹出

    3. 框

$(document).ready(function() {
  $('[data-toggle="popover"]').popover({
    placement: 'top',
    html: true,
    title: function() {
      return 'User Info: ' + $(this).data('title') + ' <a href="#" class="close" data-dismiss="alert">×</a>'
    },
    content: function() {
      return '<div class="media"><a href="#" class="pull-left"><img src=".." class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">' + $(this).data('name') + '</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
    }
  });
});
$(document).ready(function() {
  $(document).on("click", ".popover .close", function() {
    $(this).parents(".popover").popover('hide');
  });
});
.bs-example {
  margin: 160px 10px 0;
}
.popover-title .close {
  position: relative;
  bottom: 3px;
}
<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>
<body>
  <div class="bs-example">
    <button type="button" data-title="Student" data-name="vikas bansal" class="btn btn-primary" data-toggle="popover" onclick="">Click Me</button>
    <button>show click me popover</button>
  </div>
</body>

根据 mmgross 答案，但使触发手册应该可以工作。

$(document).ready(function() {
  $('#popoverbtn').popover({
    trigger: 'manual',
    placement: 'top',
    html: true,
    title: function() {
      return 'User Info: ' + $(this).data('title') + ' <a href="#" class="close" data-dismiss="alert">×</a>'
    },
    content: function() {
      return '<div class="media"><a href="#" class="pull-left"><img src=".." class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">' + $(this).data('name') + '</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
    }
  });
});
$(document).ready(function() {
  $(document).on("click", ".popover .close", function() {
    $(this).parents(".popover").popover('hide');
  });
});
.bs-example {
  margin: 160px 10px 0;
}
.popover-title .close {
  position: relative;
  bottom: 3px;
}
<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>
<body>
  <div class="bs-example">
    <button type="button" id="popoverbtn" data-title="Student" data-name="vikas bansal" class="btn btn-primary">Click Me</button>
    <button type="button"class="btn btn-primary"onclick="$('#popoverbtn').popover('toggle');">show click me popover</button>
  </div>
</body>

您可以使用

$(elementSelector).popover('show')触发弹出框。

您可以使用trigger:'manual'，这解决了在click me上弹出框打开的问题。学分@Paul法语

另外，我已经重新格式化了您的代码。拥有多个$(document).ready()并不好 

$(document).ready(function() {
  registerPopover();
  registerEvents();
});
function registerEvents() {
  $(document).on("click", ".popover .close", function() {
    $("#btn1").popover('hide');
  });
  $("#btn2").on("click", function() {
    $("#btn1").popover('show');
  })
}
function registerPopover() {
  var contentHTML = '<div class="media">' +
    '<a href="#" class="pull-left">' +
    '<img src=".." class="media-object" alt="Sample Image">' +
    '</a>' +
    '<div class="media-body">' +
    '<h4 class="media-heading">' + $("#btn1").data('name') + '</h4>' +
    '<p>Excellent Bootstrap popover! I really love it.</p>' +
    '</div></div>';
  var titleHTML = 'User Info: ' +
    $(this).data('title') +
    ' <a href="#" class="close" data-dismiss="alert">×</a>'
  $("#btn1").popover({
    placement: 'top',
    html: true,
    trigger: 'manual',
    title: titleHTML,
    content: contentHTML
  })
}
.bs-example {
  margin: 160px 10px 0;
}
.popover-title .close {
  position: relative;
  bottom: 3px;
}
<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>
<body>
  <div class="bs-example">
    <button id="btn1" type="button" data-title="Student" data-name="vikas bansal" class="btn btn-primary" onclick="">Click Me</button>
    <button id="btn2">show click me popover</button>
  </div>
</body>

相关文章：