Question

我有一个uib-popover，其中包含供人们捐款的选项。 popover中有两个图标 - 一个用于paypal，另一个用于patreon。

当用户点击图标时，会在paypal / patreon页面上打开一个新页面。

问题出现了，因为paypal图标实际上是用于生成html页面的隐藏表单。这种隐藏的形式导致patreon图标向下移动大约10px，而不像平常那样与paypal图标平行。

以下是popover模板的html：

<script type="text/ng-template" id="donatePopoverTemplate.html">
  <div><!--

  --><form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
      <input type="hidden" name="cmd" value="_s-xclick">
      <input type="hidden" name="hosted_button_id" value="K2D7T7AWDFWT8">
      <input type="image" class="donate-svg" src="paypal.svg" border="0" name="submit">
    </form><!--

    --><img class="donate-svg" src="patreon.svg">

    <span style="display:inline-block; width:2px;"></span>
    <span class="popover-close popover-close-icon" ng-click="donate()" aria-hidden="true">&times;</span>

  </div>
</script>

我创建了一个plnkr来准确显示正在发生的事情： http://plnkr.co/edit/ojSmXkNBWOa0UmFWj10b

有人知道如何将两个图标保持在同一行吗？我已经尝试将patreon图标位置设置为相对并将其向上移动几个像素，但这仍然使得弹出窗口看起来太高而不适合它所包含的元素。

所有帮助表示赞赏！

Answer 1

我通过将图像放在popover中并创建隐藏表单来解决这个问题。然后我们使用ng-click（）然后提交表单。

这是隐藏的形式：

<form id="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="{{paypal_id}}">
</form>

这就是模板脚本的样子：

<script type="text/ng-template" id="donatePopoverTemplate.html">
  <div><!--

    --><img class="share-svg opacity80" style="width:24px;" src="/images/logos/donate/paypal.svg"
      uib-tooltip="Paypal" tooltip-placement="top" ng-click="donate('paypal')"><!--

    --><img class="share-svg patreon-svg opacity80" style="width:23px;" src="/images/logos/donate/patreon.svg"
      uib-tooltip="Patreon" tooltip-placement="top" ng-click="donate('patreon')">

    <span style="display:inline-block; width:2px;"></span>
    <span class="popover-close popover-close-icon" ng-click="closeDonatePopover()" aria-hidden="true">&times;</span>

  </div>
</script>

在ng-click中，我们提交了这样的表格：

document.getElementById('paypal-form').submit();

有点hacky，但是如何以及......

Answer 2

您可以使用相对定位并仅在patreon.svg上更改顶部。

element.style {
    position: relative;
    top: -9px;
}

UI Bootstrap Popover中隐藏表单内的图标会导致其他图标垂直向下推

2 个答案: