标签: popover

我想制作一个可以像聚光灯搜索实现一样显示为弹出窗口的弹出窗口？我只能使用传统方式在中心显示 Quicklook 窗口，但我想做这样的事情：

我怎样才能这样做呢？谢谢。

我的引导弹出窗口有问题。我有一个按钮，当我单击它时，它会显示一个表单。在表单中有一个按钮，我希望当我单击此按钮时，它会发出警报。但是当我点击它时，它不会发出任何警报。我不知道为什么它不起作用，你能帮助我吗？谢谢大家！

<script src="//code.jquery.com/jquery.js"></script>
	<!-- Latest compiled and minified CSS & JS -->
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function() {
		  $('#form_popover #ok').click(function(){
		  		alert("hi");
		  });
		  $('.btn-open-popover').popover();

		  // //popover option
		  $("#a-popover").popover({
		    title: 'Dang ki thong tin',
		    content: $('#divContentHTML').html(),
		    placement: 'right',
		    html: true
		  }); 
		});
	</script>

<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

	<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
		<a href="#" class="btn btn-default" id="a-popover">Click!</a>
        <div id="divContentHTML" style="display:none">
         <form method="post" id="form_popover">
          	<div class="form-group form-inline kc">
          		<label for="">Name</label>
          		<input type="text" class="form-control" id="user" placeholder="Input field">
          		<label for="">Email</label>
          		<input type="text" class="form-control" id="email" placeholder="Input field"> …

我正在使用 Bootstrap Popover，弹出窗口内容是 HTML。我使用下面的代码来初始弹出窗口。此代码基于/sf/answers/924271351/这个答案。弹出窗口内容位于 id 的 div 中#song-status-popover。

$(".song-status-link").popover({
            html: true,
            placement: 'bottom',
            content: function () {
                return $("#song-status-popover").html();
            }
});

我想在单击弹出窗口外部时关闭弹出窗口，因此我使用了以下代码：

$('html').on('mouseup', function (e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function () {
                    $(this).closest('div.popover').popover('hide');
                });
            }
});

到目前为止，它运行得很好，但我在同时使用这两个代码时面临一个问题。当我打开弹出窗口并单击外部将其关闭时，如果我再次单击链接以打开弹出窗口，则第一次单击时它不会打开。我必须点击两次才能打开它。

我想知道我缺少什么以及为什么我在通过单击外部关闭弹出窗口后无法一键打开弹出窗口。请帮忙！

更新：我相信，当我单击外部时，它会隐藏弹出窗口，但引导程序仍然认为它是打开的，第一次单击时，它实际上认为它已关闭，第二次单击时，它打开弹出窗口。

我是编码新手，目前正在使用 ionic 2 做一些练习应用程序。我遇到的问题是，我在按下按钮时显示弹出窗口，并且在标题部分内我尝试在标题和副标题之间使用项目分隔符。每当我尝试向上移动分隔线以使其接近标题时，就会发生这种情况：

有没有办法删除分隔线的空间或使其变小，以便它不会掩盖标题并使其看起来像下划线？

编辑：这是 .

弹出窗口.html

<ion-row>
  <ion-title class="title">BRAND</ion-title>
</ion-row>

<ion-row>
  <ion-col width-100 class="divider">
    <ion-item-divider></ion-item-divider>
  </ion-col>
</ion-row>

<ion-row>
  <ion-item class="subTitle"no-lines>
    <p>Select your part</p>
  </ion-item>
</ion-row>

和 popover.ts

  .title{
    text-align: center;
    padding-top: 5px;
  }

  .divider{
    margin-top: -15px;
  }

  .poPosition{
    padding-top: 100px!important;
  }

这就是我现在使用的全部。

我想在 Bootstrap 弹出窗口中创建一个表单。弹出窗口显示所有元素，但当我使用form标签或等时input，button它不会显示任何内容。

var options = {\r\n  content: function() {\r\n    return $("#message_popover_content").html();\r\n  },\r\n  html: true,\r\n  container: "body",\r\n  placement: \'bottom\',\r\n};\r\n\r\n$(\'#message_popover\').popover(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>\r\n<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">\r\n<a href="javascript:void(0)" id="message_popover" class="sm-btn-success border-default mt-2 ml-4" rel="popover">Envoyer une autre version</a>\r\n<div id="message_popover_content" class="d-none">\r\n  <div class="popover-cart">\r\n    <div class="popover-head">\r\n      <h3 class="s-m-title">Envoyer une nouvelle version de l\xe2\x80\x99EVP (juillet 19)</h3>\r\n    </div>\r\n    <div class="popover-body">\r\n      <div class="send-msg-form add-formation-modal">\r\n        <form action="javascript:void(0)">\r\n          <div class="form-group">\r\n            <textarea class="form-control" name="message" rows="3"></textarea>\r\n          </div>\r\n          <div class="form-group">\r\n …

有人知道如何通过 javascript/jquery 创建数据并将其添加到 Bootstrap 5 弹出窗口吗？

使用 bootstrap 3 我能够做到这一点：

$('#element').popover({ placement : 'left', trigger : 'focus', html: true });
let content_template = `<h1>Hello World!</h1>`;
$('#element').data('bs.popover').options.content = content_template;

但我不知道如何使用 bootstrap 5 做同样的事情。文档没有提到任何关于这一点的内容。有谁知道 BS5 中的 popover 是如何管理的？

我正在开发一款iPad应用程序,它有一个popover,可以显示一个项目列表.我需要能够删除其中一个项目,所以我正在考虑添加按下并保持(也就是长按)一个列表项目的能力,这将显示该项目的另一个弹出窗口,其中显示一个动作列表删除按钮.

两个问题:

• 就iPad UX而言,这是一个好主意吗？没有在任何地方看到它,我想这可能有点令人困惑......但我怎么能这样做呢？
• 这是可能的,代码明智吗？我还没有尝试过,但我仍然是iOS开发的新手,所以我可以看到自己摸索了几个小时才发现有一个技术原因为什么它不可能.

谢谢!

我目前正在构建Safari扩展.我有一个简单的弹出窗口,有3个按钮.在单击这些按钮时,我需要在全局页面上执行一些涉及操作localStorage和其他一些操作的操作.

我似乎无法找到任何方式将消息从弹出窗口发送到全局页面.从弹出窗口到内容脚本的调度似乎有很多主题,但对全局页面没有任何意义.

这可能非常简单,我只是遗漏了一些东西.非常感谢任何帮助.

HTML

<div class="pop-div">
    <a href="#" data-toggle="popover" title="<strong>Notifiche</strong>" data-html="true" data-content="Notification 1<hr />Notification 2<hr />Notification 3 <hr />Notification 4">Notifications</a>
    </div>

JAVASCRIPT

$('[data-toggle="popover"]').popover({placement: 'bottom'});

        //hide popover when click outside
        $('body').on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                if ($(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

CSS

.pop-div .popover-content {
height: 50px;
overflow-y: scroll;

}

我在上面的代码中有这个popover.我正在尝试在弹出窗口内容的左侧显示滚动条,但此代码不起作用.任何帮助将不胜感激.谢谢!

使用bootstrap popover,我可以这样做:

$("#example").popover({ 
     trigger: "hover"
});

所以popover对悬停做出反应而不是点击(演示).但是 - 我想将它设置为在几秒钟的悬停之后出现(例如2).有没有简单的方法呢？我到处搜索但找不到任何类似的东西......