如何在点击时显示弹出框?

Posted

技术标签:

【中文标题】如何在点击时显示弹出框?【英文标题】:How to show popover on click? 【发布时间】:2011-12-14 10:19:37 【问题描述】:

我目前正在使用 Siwapp 的 0.5 版本,我正在尝试在发票表的每一行上显示付款按钮的弹出框。但我必须点击一下。我有以下JS代码:

jQuery(function($)

  $('table[data-type="invoices"] a.payments').popover(
    live: true,
    placement: 'left',
    offset: 5,
    html: true,
    content: function() 
      return $(this).attr('class');
    ,
    trigger: 'manual'
  ).live('click', function(e)
    e.preventDefault();
    $(this).popover('show');
  );

);

表格HTML是这样的(见文末链接):

<table class="zebra-striped align-middle" data-type="invoices">
  <colgroup>
    <col />
    <col />
    <col class="date" />
    <col class="date" />
    <col class="status" />
    <col class="currency" />
    <col class="currency" />
    <col class="payments" />
  </colgroup>
  <thead>
    <tr>
      <th>% trans %Number% endtrans %</th>
      <th>% trans %Customer% endtrans %</th>
      <th>% trans %Date% endtrans %</th>
      <th>% trans %Due Date% endtrans %</th>
      <th>% trans %Status% endtrans %</th>
      <th>% trans %Due% endtrans %</th>
      <th>% trans %Total% endtrans %</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ASET-22</td>
      <td>Roxxon</td>
      <td>5/28/11</td>
      <td>9/16/11</td>
      <td>
        <span class="label important">% trans %overdue% endtrans %</span>
      </td>
      <td></td>
      <td>$11,435.23</td>
      <td>
        <a href=" path('invoice_payments',  'invoiceId': 4 ) " class="btn secondary icon clock payments" title="Payments">% trans %Payments% endtrans %</a>
      </td>
    </tr>
  </tbody>
</table>

如果我删除“手动”触发器,它可以工作,但如果我设置它,它不会。

有人知道怎么做吗?谢谢!

【问题讨论】:

【参考方案1】:

Popover 会自动处理您手动执行的一些操作,这可能会导致一些奇怪的冲突。当您可以自己执行此操作时,您会不必要地添加自己的单击处理程序,并且您正在包装似乎没有必要的整个设置功能。试试这样的:

$('table[data-type="invoices"] a.payments').popover(
  live: true,
  placement: 'left',
  offset: 5,
  html: true,
  content: function() 
    return $(this).attr('class');
  ,
  trigger: 'manual'
);

【讨论】:

【参考方案2】:

只是一个更新:Bootstrap 2.1 允许您提供 click 作为触发器。 (http://twitter.github.com/bootstrap/javascript.html#popovers)

【讨论】:

以上是关于如何在点击时显示弹出框?的主要内容,如果未能解决你的问题,请参考以下文章

地图缩放时,别针上的弹出框不移动

在 Swift 中点击按钮时显示一个弹出框

在哪种情况下应该在情节提要中使用 Popover segue?

UISplitViewController:如何强制在应用启动时显示主弹出框? (肖像)

在页面加载时显示Tinybox 2弹出框

iOS 弹出框在关闭后不会消失