如何像Modalbox一样在屏幕中央打开bootstrap popover？
要像Modalbox一样在屏幕中央打开Bootstrap Popover，可以通过以下步骤实现：
- 首先，确保已经引入了Bootstrap框架和相关的JavaScript文件。
- 在HTML文件中，创建一个按钮或其他触发元素，用于打开Popover。例如：
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="auto" title="Popover Title" data-content="Popover Content">Open Popover</button>- 使用JavaScript代码初始化Popover，并设置相关选项。在这里，我们需要设置
container属性为body，以确保Popover的位置相对于整个页面而不是触发元素。同时，设置placement属性为auto，以便Popover根据可用空间自动选择最佳位置。
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
placement: 'auto'
});
});- 接下来，我们需要使用CSS样式将Popover居中显示。可以通过以下代码实现：
.popover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}- 最后，为了使Popover在屏幕中央打开，我们需要在触发元素上添加一个点击事件，以便在Popover显示之前将其位置调整为屏幕中央。可以使用以下JavaScript代码实现：
$(function () {
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
var popover = $(this).data('bs.popover').tip();
var popoverWidth = popover.outerWidth();
var popoverHeight = popover.outerHeight();
popover.css({
'margin-left': -popoverWidth / 2 + 'px',
'margin-top': -popoverHeight / 2 + 'px'
});
});
});完成上述步骤后，当点击触发元素时，Popover将在屏幕中央打开。
请注意，以上答案中没有提及任何特定的云计算品牌商，如有需要，可以根据具体情况选择适合的云计算服务提供商。
相关·内容
在我的11号角计划中。
当我试图在一个屏幕中使用多个ng-popover时，当打开一个弹出，然后在同一个屏幕上打开另一个弹出时，首先将ng-popover关闭，其默认的ng-popver功能。
但是当我在ng-popover中实现日期选择器时，当我选择日期表单日期选择器时，ng-popover会自动关闭。
使用此popover-trigger="'outsideClick'"和popover-trigger="focus"
提前谢谢。
浏览 5提问于2022-07-13得票数 0
当前bootstrap 2.3.2 popover不响应。在小屏幕上，它会在屏幕之外打开。有没有别的选择？
谢谢
浏览 1提问于2014-02-28得票数 4
我想在屏幕中央显示弹出窗口。下面的图片显示了它正在移动左侧的部分。
我已经尝试了下面的代码来显示弹出控制器。
func displayPopoverVC() {
let popOver = popupArtistStoryboard.instantiateViewController(withIdentifier: "MeasurementPopupVC") as! MeasurementPopupVC
popOver.modalPresentationStyle = .popover
popOver.popoverPresentationC
浏览 4提问于2018-04-19得票数 0
4回答
我正在尝试在React Bootstrap中实现。
我使用以下代码实现了它：
var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');
...
<ButtonToolbar>
<OverlayTrigger trigger="click" placement="left" overlay={<Popover title="Popover left"><strong&g
浏览 11提问于2015-11-19得票数 3
回答已采纳
1回答
我在我的网站上使用引导v3.3.5。我想打开一个弹出式，其中包含三个菜单项，用水平线隔开。
菜单项应是垂直的，如下所示：
编辑事件
邀请会员
删除事件
每个菜单项都应该是超链接，以打开一些新的模式对话框或类似的东西。为此，我尝试了下面的代码，但它没有对我起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<
浏览 1提问于2016-01-05得票数 6
回答已采纳
3回答
链接到我的github帐户的文件，只需下载压缩：
当我点击" popover“链接时，我想把popover放在屏幕中央。
我尝试引用一些堆栈溢出问题，例如：
但没那么走运。我是swift的新手，我只使用swift，而不是objective C。
我看到的屏幕截图：
浏览 0提问于2016-05-13得票数 2
1回答
我想用webpack捆绑一个大包的一个或两个组件(反应-引导)。我的代码中有这样的内容：
Popover = require('react-bootstrap').Popover;
OverlayTrigger = require('react-bootstrap').OverlayTrigger;
我不得不使用公共语言，但我很好奇这是否在ES6 import Popover from 'bootstrap-react'中更有效。目前，webpack把整个反应
我如何让webpack只捆绑这两个组件及其依赖关系？
浏览 5提问于2015-11-05得票数 0
回答已采纳
3回答
角1.5
在ng-repeat中，我创建了一个按钮，该按钮将显示带有锚链接的Bootstrap popup。
如何绑定onAction调用，以便它调用我的$scope.onAction()函数？(onAction()不绑定到$scope.onAction())。
<div ng-repeat="item in model.Holdings track by $index" bs-popover>
<button class="popoverBtn"
data-content="<a ng-click=&#
浏览 3提问于2017-03-06得票数 0
我使用，在使用OverlayTrigger/Popover时遇到任何问题。当我关闭弹出并重新打开它时，<ComponentWithState />的状态将被丢弃。
。要复制:单击按钮，单击链接，注意文本如何从"State: Off“更改为"State: On”。关闭弹出(单击旁边或重新单击按钮)，然后再单击按钮打开弹出.注意文本是如何写"State: Off“的。国家没有坚持(没有说" state : On")。
你知道我怎样才能让状态在关闭/重新打开之间保持不变吗？
'use strict';
var React = re
浏览 0提问于2015-08-10得票数 1
回答已采纳
2回答
我喜欢让我的弹出框保持打开直到用户显式关闭它们。
新的Bootstrap Popover的一个好特性是当用户改变设备方向、滚动或调整窗口大小时，它们会自动重新定位。它们甚至伴随着内容的重新流--例如，当一个段落被包装，当你调整窗口的大小时，元素会增长或缩小--屏幕上的所有弹出框都会保持重新定位，以接近目标。
Popover插件是如何知道页面正在重新运行，从而触发popover重新定位的？
我的webapp是动态的，用户的动作会导致元素增长/收缩，打开/关闭等等。目前，当我通过代码更改页面时，弹出程序就会被抛在后面--它们不会在目标附近重新定位。
一个解决办法，作为一个用户，只是滚动屏幕一点点和
浏览 4提问于2017-10-19得票数 2
回答已采纳
2回答
下一个JS与
、、
我对我的方式有问题，需要帮助
我有这个组件主题，它将调用我的模态组件，但遗憾的是，当我单击添加新的主题时，模态不会打开，但是它会收到道具真，应该打开模态。
subjects.js
import Layout from '../components/Layout'
import * as React from 'react-bootstrap'
import ModalBox from '../config/modalBox'
import { useRouter } from 'next/router'
import { useE
浏览 2提问于2020-12-07得票数 0
回答已采纳
如何预先打开(初始化为打开) React Bootstrap Popover？我有以下在初始关闭状态下工作的代码， const popoverApproverNewAgreement = (
<Popover id="popover-approverNewAgreement">
<Popover.Title as="h3"></Popover.Title>
<Popover.Content>
Some text
</Popover.Co
浏览 17提问于2021-09-09得票数 0
回答已采纳
我试图编写一个简单的单元测试，但似乎无法理解。我想测试一个引导模式，以确保它在将某些对象属性传递给它时显示正确的内容。下面是我的模态代码：
import React, { Component, PropTypes } from 'react';
import { Button, Modal } from 'react-bootstrap';
class ModalBox extends Component {
render() {
const { modalBox } = this.props;
let content;
if (
浏览 4提问于2016-01-20得票数 0
回答已采纳
1回答
新的React/Redux，我很难在事件处理上实现。
我知道“this”引用键在传递到map (recipeboxthis.props.addRecipe.map of recipebox)函数时为空，但我不知道如何解析它。
实际上，我想将onChange处理程序传递给数组中的每个元素的ModalBox。
src/containers/recipebox
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ListGroup, List
浏览 2提问于2016-08-29得票数 0
回答已采纳
1回答
我不知道如何使'Popover‘组件的材料UI保持固定在屏幕上，当我打开它。因为当我打开弹出窗口()时，它不会阻止滚动，单击后出现的框将沿着整个页面移动。当弹出窗口打开时，我不想让滚动条可见。
我用的是最新版本。
下图
浏览 3提问于2022-08-16得票数 1
回答已采纳
我不知道如何使爆米花工作，如：。
文档讨论了popover支持的插件和工具提示插件，因此我修改了我的webpack.config.js以添加这两个插件，现在看起来如下所示：
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
Popover: 'exports-loader?Po
浏览 2提问于2017-10-17得票数 1
回答已采纳
2回答
我想创造一种类似Bootstrap的模式..。我写了这段代码：
<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>
<div class="modal fadeIn" id="myModal">
<div class="modal-header">
Roj Framework <span clas
浏览 9提问于2016-07-19得票数 1
回答已采纳
Uncaught：$(.).load(.).modal不是函数
当我关闭一个模式并试图再次重新打开模式框时，我可以在控制台中看到这个错误。有时它工作2-3次，然后给出这个错误。
有人能给我什么建议吗？
我在一页上增加了一个div
<div class="modal fade" id="loadmodalbox" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"></div&
浏览 2提问于2016-04-13得票数 2
我使用下面的代码来使弹出窗口在悬停时保持打开状态：
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var
浏览 1提问于2016-02-25得票数 0
我打开一个bootstrap模式窗口，通过Ajax加载一堆".map-pin“图像。单击图像应该会打开弹出窗口。我有很多工作要做：
$('body').popover({
selector: '.map-pin',
html: true,
content: function() {
return $(this).next('.popover_content').html();
}
});
但是，现在我一次只需要打开一个弹出窗口。而且，如果点击body (而不是popover)关闭所有打开的p
浏览 2提问于2014-05-15得票数 0
我无法使用bootstrap popover加载远程html数据。下面是我的代码。我在下面试过了
<a href="#" id="oneData" class="divAnchor" rel="popover"
load-remote-data="TestGetJson.htm">Bootstrap popover with ajax data</a>
下面的代码是脚本标签中的代码。当我使用firebug进行调试时，我得到了来自服务器的响应，但它没有显示在屏幕上。
浏览 3提问于2013-03-18得票数 0
回答已采纳
我想更改BootStrap Popover的宽度。我知道如何在CSS文件中做到这一点：
.popover{
max-width: 800px;
}
.popover-content {
width:500px;
padding: 0px;
}
但是如何更改javascript函数中的宽度呢？
浏览 1提问于2015-02-27得票数 0
我将bootstrap popover与vuejs结合使用。
如何触发vue功能？
在下面的代码中，当我单击add break链接时，它用click me按钮打开bootstrap popover。现在vuejs不起作用了，如果我点击click me，它就不会提示警报。
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button&g
浏览 4提问于2016-02-05得票数 1
已使用其他答案中的解决方案在外部单击时隐藏Bootstrap popover。
然而，它需要两次单击才能再次打开弹出窗口(如果我通过单击外部将其关闭)。
它工作正常，当我使用按钮关闭它时，它会在第一次单击时打开。
下面是重新生成的问题：
使用的html：
<!-- Popup button -->
<a id="menu-button" class="menu-button" data-html="true" role="button" data-container="body" data-tog
浏览 0提问于2015-12-30得票数 2
我正在使用@ GoogleMap /GoogleMap在一个离子/角度网页应用程序上绘制标记。
当用户单击地图标记时，我希望在该标记上弹出一个小信息，即，就像Google "InfoWindow“一样。此电容包装器没有提供显示InfoWindow的方法，因此我使用Ionic的popover进行了我自己的演示；下面是代码。
现在我的问题是，弹出窗口总是显示在屏幕的中央。onSetMarkerClickListener回调传递标记，但是这个对象没有任何与单击事件相关的东西，我可以从中获取屏幕坐标来定位弹出窗口。我做了console.log(marker)检查这个对象。
我如何才能准确定位弹
浏览 15提问于2022-11-22得票数 -2
我正在使用角4和来自ng引导的Popover组件。它工作很好，但我试图改变它的位置，如果窗口的大小小于600 if。我找不到选择了。我的设置类似于以下内容：
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModu
浏览 1提问于2017-06-06得票数 0
大家好，我将设备设置为横向模式，在该模式下，当我按下“照片画廊”按钮时，画廊将在肖像模式下打开，从画廊中选择图片后，它将返回到横向模式。当我在横向模式下工作时，我希望以横向模式打开画廊。
我用这段代码打开了图片库
- (void)imagesFromGallery{
imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
if(!popover)
{
浏览 0提问于2012-08-02得票数 0
回答已采纳
有没有人知道twitter bootstrap的popover组件的一个扩展，它可以动态更改放置选项，以确保popover显示在屏幕上？
浏览 3提问于2012-04-20得票数 17
回答已采纳
1回答
我正在尝试编辑弹出窗口的样式。在这种情况下，我想编辑显示器的宽度。但是，我有一个全局popover样式表，它适用于应用程序中的所有popover。
/* ========================================================================
Component: popovers
========================================================================== */
.popover {
border-radius: 0;
border:
浏览 1提问于2018-05-10得票数 0
2回答
我想要可拖动或可移动的翻盖，因为当在一页中有两个翻盖打开时，两个翻盖会被彼此重叠。对于这件事，你可以检查下面的截图。
所以我想要移动弹出式，使用鼠标光标指针，我想要放置。这样我就可以同时看到两个弹射了。
我已经有密码了。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
浏览 3提问于2019-02-04得票数 0
回答已采纳
2回答
我在我的网站上使用ModalBox ()。它的设置和工作良好，但我想让它在页面加载在某些情况下打开。特别是，我希望在用户注销时打开它并显示一条消息。现在，当用户注销时，它会转到我的主页，并在页面中显示一条消息(我通过在用户注销时加载index.php?loggedout=true并在变量为true时显示文本来完成此操作。使用此方法(具有?loggedout=true)，但在加载时打开ModalBox，而不仅仅是页面正文中的文本。或者，如果它可以在没有变量的情况下检测到它来自哪个页面，然后打开，那也是很好的。
如何让ModalBox在页面加载时自动打开。
编辑:我试着把
<script t
浏览 2提问于2011-05-16得票数 0
回答已采纳
由于安全性更新，我正在将Rails 4.2.2应用程序重写为Rails 4.2.5。我在4.2.2应用程序中运行Ruby2.2.2。在4.2.2的应用程序中，我使用gem twitter-bootstrap-rails来引导2，不幸的是，由于Ruby，我不能再在Rails 4.2.5中使用那个版本的gem。我在GitHub上提交了一个问题，但没有人回应。我决定将我的应用程序升级到Ruby2.3.0和Rails 4.2.5.1，并使用gem bootstrap-sass的最新版本来引导2。
在我使用gem twitter引导-rails的旧应用程序中，我的代码成功地将部分显示为弹出器。下面的代码
浏览 3提问于2016-02-23得票数 0
回答已采纳
1回答
有一个类似的问题，但答案不是很清楚，我没有足够的“观点”来评论它。
我读过和其他一些文件，但找不到答案。
我使用本文作为我的指南：
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
.
.
.
render() {
const popover = (
浏览 2提问于2020-12-29得票数 0
我无法打开工具提示后关闭相同的点击外面的按钮。感谢你的帮助。
下面是复制这个问题的方法
点击按钮
单击“外部”按钮关闭工具提示。
再次单击该按钮以打开工具提示
注意:按钮需要两次单击才能打开工具提示，然后单击div外部。
下面是源代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge
浏览 0提问于2018-10-29得票数 0
回答已采纳
我想使用带有ajax模板的Bootstrap Popover。下一个脚本运行良好..。
$('.popover-trigger').bind('click', function(k) {
var e=$(this);
title="Jeepieee"
$.get('/popover/'+e.data('pophtml'),function(d) {
e.popover({
浏览 3提问于2016-06-25得票数 0
我一直在尝试让bootstrap popovers在Wordpress循环中工作，但没有成功，这就是我到目前为止所做的：
<?php while($have_posts()): $the_post();
$excerpt = strip_tags(get_the_excerpt());?>
<a class="<?php echo the_ID()?>" href="<?php echo the_permalink();?>"><?php echo the_title();?></a&g
浏览 0提问于2013-01-04得票数 0
回答已采纳
2回答
在iOS 15中，我的应用程序中有一个日期选择器，它使用.compact样式，因此它将日期和时间选择UI显示为弹出式。
在UI测试中，我找不到拒绝popover的方法，因为我已经尝试过对popover解雇的建议，例如：
app.otherElements["PopoverDismissRegion"] (没有exist)app.otherElements["dismiss popup"].tap() (没有exist).windows.element(boundBy: 0).tap() )(只是点击屏幕中央，它仍然是弹出窗口，所以什么都不做)
浏览 6提问于2021-12-11得票数 0
回答已采纳
1回答
我是CakePHP 2.x的新手。我现在所做的是我已经在CakePHP 1.3中完成了
我已经在表视图中显示了所有数据。当用户点击添加和编辑按钮时，我想打开一个模式框。我还在CakePHP 2.x中实现了AJAX活动、停用和AJAX分页。
活动/非活动是通过$this->ajax->link完成的
现在，在简单的html文件中，当我编写以下代码时，将出现一个modalbox：
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="
浏览 4提问于2013-08-21得票数 0
UIActionController在iOS 8中替换了UIActionSheet。有没有办法在UIActionController中重新创建UIActionSheet的行为？。请注意，我正在尝试绘制一个从iPhone上的外部操作栏按钮出来的UIActionController，所以我想我也不能使用通用的UIActionSheet示例来做这件事。
我创建了一个UIBarButtonItem，并且在它的IBAction中创建了一个UIActionController。我尝试了以下几种方法：
var alert = UIAlertController(title: "XYZ"
浏览 2提问于2015-02-16得票数 0
4回答
这是我的代码，但它不会工作。 当我在内容中使用原生Bootstrap PopOver时，前端不会显示该PopOver，并且HTML的格式不正确。 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.
浏览 27提问于2017-12-08得票数 11
回答已采纳
1回答
引导弹出不正常工作
、、、
我在我的backboneJs项目中使用twitter引导-2.3.2popover。
在单击时，我正在调用一个函数，因为哪个函数应该触发popover
<li>
<a class="candidPopover" href="#" id="loginUser" rel="popover"><%= candidateName %></a>
</li>
myFunctionName : function(e){
var id = e.target;
$(id).po
浏览 2提问于2013-12-09得票数 1
回答已采纳
我是新的jQuery和开机。通过使用引导弹出，我为一个页面实现了多个弹出。我的popover和js脚本如下：
<a data-toggle="popover" class="btn popper btn-default ">
Click me 1
</a>
<div cla
浏览 2提问于2016-10-24得票数 0
回答已采纳
2回答
Bootstrap的popover在我的本地机器上运行良好，但在heroku上似乎不起作用。我不知道为什么。下面是我能想到的相关文件/代码：
Bundler.require(*Rails.groups(:assets => %w(development test)))
我还尝试了懒惰编译，但没有成功(Bundler.require(:default, :assets, Rails.env))
和弹出视图代码：
%img.pop{:alt => "", :src => "#{photo.photo.url(:thumb)}", :rel =>
浏览 1提问于2012-07-03得票数 0
回答已采纳
1回答
使用angular ui bootstrap，我创建了一个具有ng个重复的模态。我在柱塞里放了一个小例子。
我正在试图弄清楚如何让popovers彼此独立地打开和关闭，现在它们都可以同时打开和关闭。
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<
浏览 12提问于2018-01-24得票数 0
回答已采纳
假设我的网站上有一个Bootstrap Popover，如下所示： HTML： <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top"
data-content="Insert the very large instructions to a game that participants need a reminder on ho
浏览 7提问于2020-10-01得票数 0
回答已采纳
我试图将bootstrap popover内容从html属性中分离出来，就像你可以对其他组件所做的那样，但我无法让它工作……
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1&#
浏览 0提问于2015-06-06得票数 6
16回答
我在一个bootstrap站点上工作，在从2.0更新到bootstrap 2.2后，除了弹出窗口之外，一切都正常工作。
弹出框仍然可以很好地显示，但它们不会显示在所有其他元素的顶部。
<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
<div> //popover shows on top of this
<div> //popover shows on top of this
浏览 0提问于2012-12-25得票数 130
回答已采纳
1回答
Angular bootstrap popover (工具提示)可能有打开隐藏popover的事件。{ 'mouseEnter'：'mouseLeave'，'click'：'click'，'focus'：‘模糊’}
我需要的是显示在‘焦点’隐藏在‘模糊’。但是我处理的是DIV元素，而不是输入，所以我不能使用焦点/模糊(它就是不能工作)
如何重写工具提示/弹出模块来模拟模糊事件(通过处理点击正文等)？
浏览 1提问于2015-08-31得票数 2
5回答
我想使用Twitter的Bootstrap CSS库在现有的模态对话框上使用popover效果。我将弹出窗口绑定到小图像图标。
$('#infoIcon').popover({
offset: 50,
placement: 'right'
});
通道本身也是根据文档添加的：
$('#modalContainer').modal({
keyboard : true
});
但我得到的效果是，popover呈现在模式容器下，而不是模式div上(参见下面的屏幕截图)。我怎样才能把popover真正带到modal div上呢？
浏览 1提问于2011-10-06得票数 8
回答已采纳
我在一个表格中使用了angularjs 。
这个表是使用ng-repeat填充的，如果popover是打开的，并且我向表中添加了新数据，那么popover就会闪烁。
下面是一个有效的示例
有什么关于如何防止闪烁的想法吗？
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script&g
浏览 15提问于2016-08-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
