标签: popover

我在让 Bootstrap 弹出窗口与动态创建的元素一起工作时遇到了问题（但这是一个不同的问题）。

因此，作为一种变通方法，并且由于这些 popover 元素的内容本身实际上并不是动态的，因此我决定创建一系列带有 popover 的隐藏元素，这些元素在 HTML 加载时已经存在于 DOM 中。然后我计划使用 JQuery 的 clone() 克隆它们并将它们放在我需要的地方。

问题是，当新克隆的 popover 触发时，popover 的位置错误。

HTML 看起来像这样

<div style="display: none">
    <span id="anid" class="popoverbottom label label-info" data-title="Title" data-content="Content">TAG</span>
</div>

然后我使用如下代码在 popoverbottom 类上注册 popover 事件：

$(".popoverbottom").popover( {placement : 'bottom',  trigger: 'hover', delay: { show: 500, hide: 100 }} ); 

然后我使用 JQuery 代码克隆带有弹出框的元素，如下所示：

e = $('#anid').clone(true);
e.attr('id','anewid');

然后我动态 append() 新元素，它看起来很好。如果我将鼠标悬停在它上面，会触发一个弹出窗口，但它会出现在浏览器窗口的左上角 - 在左侧被截断一半。

如果我让包含 popover 元素的 <div> 可见 - 即删除 display:none，则 popover 出现在原始的、非动态创建的 DOM 元素上，而不是新克隆的元素上。

这显然是因为在注册 popover 时，popover 是绑定到原始元素的。虽然 …

所以我想知道......我正在使用Twitter的Bootstrap进行我的项目,我发了一个小通知Popover/Clickover(http://www.leecarmichael.com/bootstrapx-clickover/examples.html)功能.而且我想知道如何在静态高度上设置自定义滚动条...

我创建此弹出/点击的基本概念是:

$(function () {
    $("[rel='tooltip']").tooltip({container: 'body'});
});
$("#notices").clickover({
    content:data,
    html:true,
    container:'body'
    ,onShown: function () {$("#notices").tooltip("destroy");},
    onHidden: function () {$("#notices").tooltip({container:'.navbar'});},
    template: '\
        <div class="popover notices">\
            <div class="arrow"></div>\
            <div class="popover-inner">\
                <div class="popover-header">\
                    <h3 class="popover-title"></h3>\
                    <h3 class="popover-settings"><a href="/notifications.php?act=settings">Settings</a></h3>\
                </div>\
                <div class="popover-content">\
                    <p></p>\
                </div>\
                <h3 class="popover-footer"><center><a href="/notifications.php">See All</a></center></h3>\
            </div>\
        </div>'

});

使用HTML

<div id='userbar' class='btn-group input-prepend input-append'>
    <button class='btn'></button>
    <button class='btn'></button>
    <button class='btn'></button>
    <button class='btn'></button>
    <button class='btn'></button>
    <button class='btn'></button>
    <button class='btn'></button>
    <button id='notices' class='btn' rel='tooltip' data-placement='bottom' data-original-title='Notifications'> <i class='icon-exclamation-sign icon-large'> <span …

我发现以下示例显示了我需要从popover中执行的行为: 如何通过单击外部来解除Twitter Bootstrap popover？

但是,有没有人知道如何在fullcalendar中实现类似的行为？(即使用fullcalendar事件)谢谢.

我有一个按钮和弹出框内容。我想要做的是保持按钮固定但同时保持弹出内容位置固定，但我不知道该怎么做。

这是我用小提琴制作的示例。

$("#chatbtn").show().popover({ content: response.text, html: true, placement: 'top' });

http://jsfiddle.net/L8su2/530/

我不确定如何将位置固定属性添加到内容中（内容是动态生成的），这样当页面向上或向下滚动时，它仍然保持连接到按钮。

任何帮助都会很棒！谢谢！

我试图在iPhone中显示一个popover.我遵循我在这里找到的建议并使用委托"adaptivePresentationStyle",但是这个函数永远不会被调用,而ViewController它将始终以全屏模式呈现.我有"UIPopoverPresentationControllerDelegate"和下面的函数:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

        let identifier  = segue.destination.restorationIdentifier ?? ""
        if identifier == "NavigationSetup" {
            if let destinationNav   = segue.destination as? UINavigationController {
                let destination  = destinationNav.topViewController as! SetupTableViewController
                destination.popoverPresentationController?.delegate = self
                destination.popoverPresentationController?.backgroundColor  = UIColor.blue
                if self.myApp.isIpad{
                    destination.preferredContentSize  = CGSize(width: 600, height: 620)
                }else{
                    destination.preferredContentSize  = CGSize(width: 0.8 * self.view.frame.size.width, height: 0.8 * self.view.frame.size.height)
                }

                self.cellAnimations.fade(image: self.imageBlur, initOpacity: 0, endOpacity: 1, time: 0.3, completion: nil)
                destination.setupDismiss = {[weak self] () in
                    if let weakSelf = …

我正在尝试将 bootstrap popover 添加到包含任意内容的 div 元素中（但我想出的方法不起作用）：

<div id="popover-target">
   <h3>I need a popover</h3>
      <p>
        This is some content for the section
        that needs to be explained by the popover.
      </p>
</div>
<button class="btn">Show popover</button>

<script>
    $(function(){
        $('.btn').click(function(){
            $('#popover-target').popover({title: 'Title', content: 'Test Content', container: 'body', placement: 'right'});
        });
    });
</script>

如果我更改$('#popover-target')为，$('.btn')则弹出窗口会正确显示。有任何想法吗？

我想在中心使用preferredContentSize(W:250,H:50)显示PopoverViewController,但它显示了该ViewController的完整大小,请找到我在哪里做错了并纠正它.

class ViewController: UIViewController, 
    UIPopoverControllerDelegate, UIPopoverPresentationControllerDelegate {

override func viewDidLoad() {
    super.viewDidLoad()

}

@IBAction func PopBtn_Action(_ sender: Any) {

    let popController = self.storyboard!.instantiateViewController(withIdentifier: "PincodeViewController") as! PincodeViewController

    // set the presentation style
    popController.modalPresentationStyle = UIModalPresentationStyle.popover

    // set up the popover presentation controller
    popController.popoverPresentationController?.permittedArrowDirections = UIPopoverArrowDirection.up
    popController.popoverPresentationController?.delegate = self
    popController.popoverPresentationController?.sourceView = sender as? UIView // button
    popController.popoverPresentationController?.sourceRect = CGRect(x: self.view.bounds.width/2, y: self.view.bounds.height/2, width: 1, height: 1)

    popController.preferredContentSize = CGSize(width: 250, height: 250)

    // present the popover
    self.present(popController, animated: true, completion: nil)

} …

我创建了弹出窗口，其中有两个按钮。当单击弹出框内的按钮时，我想关闭弹出框。

这是我的代码： FirstViewController ：

 @IBAction func bar_button(_ sender: UIBarButtonItem) {

    let vc = storyboard?.instantiateViewController(withIdentifier: "SecondViewController") as!
    SecondViewController
    vc.preferredContentSize = CGSize(width: 200,height:80)
    let navController = UINavigationController(rootViewController: vc)
    navController.modalPresentationStyle = UIModalPresentationStyle.popover

    let popover = navController.popoverPresentationController
    popover?.delegate = self
    popover?.barButtonItem = sender as! UIBarButtonItem
    self.present(navController, animated: true, completion: nil)

}

第二视图控制器：

@IBAction func second_button(_ sender: UIButton) {
    //want to dismiss popover when button clicked
      }
@IBAction func second_button(_ sender: UIButton) {
   //want to dismiss popover when button clicked
      }

我试图在复选框更改时禁用弹出框打开，放置在弹出框目标内。我试过在复选框上停止onChange和onClick事件，但它没有按预期工作。

任何帮助将非常感激。

这是相关的代码沙箱：

import React from "react";
import ReactDOM from "react-dom";
import { Button, Checkbox, Menu, MenuItem, Popover } from "@blueprintjs/core";

import "./styles.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";

function Dropdown() {
  return (
    <Menu>
      <MenuItem text="Item 1" />
      <MenuItem text="Item 2" />
    </Menu>
  );
}

function MyCheckbox() {
  return (
    <Checkbox
      onClick={e => {
        e.stopPropagation();
        return false;
      }}
    />
  );
}

function App() {
  return (
    <div className="App">
      <Popover content={<Dropdown />}>
        <Button text={<MyCheckbox />} rightIcon="caret-down" …

我正在尝试在Popover 中包含一个表单，该表单是使用 Bootstrap 4.3、Popper.js 和 jQuery 3 创建的。每个表单的最新版本。问题在于它适用于文本，也适用于标签，但是一旦我使用表单、标签和输入，它就不会解析 HTML。

我在 CodePen 中有两个例子：

1. 一切都通过数据属性：链接
2. 通过JS：链接

示例 1 代码

HTML：

<div class="container">
    <div class="row">
      <div class="col-12 mt-5">
        <h1>Bootstrap 4 form in popover</h1>
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h2 class="mt-3">
          <span
            class="editable"
            data-toggle="popover"
            data-container="body"
            data-title="Edit"
            data-content="<form>
  <div class='form-group'>
    <label for='exampleInputEmail1'>Email address</label>
    <input type='email' class='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email'>
    <small id='emailHelp' class='form-text text-muted'>We'll never share your email with anyone else.</small>
  </div>
  <div class='form-group'>
    <label for='exampleInputPassword1'>Password</label>
    <input …