Ngx-bootstrap 弹出窗口出现在另一个位置

Question

我试图让我的弹出窗口出现在另一个 location。

是否使用 ng-template 在另一个位置定位弹出窗口？

<ng-template #popmeover>
    <button type="button" (click)='pop.hide()' class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    <p>
    I am a popoverat another location trying my best to popover!
    </p>
</ng-template> 
            
         <br><br>
         <br><br>
         <span  [popover]="popmeover" #pop="bs-popover" container="body" >you click me popover should appear there!</span>
         <br>
         <br>
  
         <span >Make popover appear here!</span>

Answer 1

您可以像这样使用 CSS：

  .popover {
  top: ###px !important;
  bottom: ###px !important;
  left: ###px !important;
  right: ###px !important; 
  }

然后将其作为 class 应用到您的弹出窗口

Answer 2

您可以执行如下操作：

<ng-template #popmeover>
    <button type="button" (click)='pop4.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <p>
      I am a popoverat another location trying my best to popover!
    </p>
  </ng-template>

  <br>
  <br>
  <br>
  <br>
  <span (click)="pop4.show()">you click me popover should appear there!</span>
  <br>
  <br>

  <span [popover]="popmeover" #pop4="bs-popover" container="body">Make popover appear here!</span>

工作Plunkr

Answer 3

我自己运行解决了这个问题，建议的解决方案不是一个选项。 ngx-bootstrap 弹出框的问题在于它在弹出框元素上同时使用常规定位和 t运行sform 来设置位置，因此您无法覆盖它。我通过将 popover 属性附加到一个空 span 并在显示 popover 之前更改 span 的位置来解决这个问题，这样 popover 无论走到哪里都跟随 span 的位置。

<span [popover]="myPopover"
    [outsideClick]="true" 
    (onHidden)="popoverIsOpen=false"
    triggers=""
    [adaptivePosition]="false"
    [isOpen]="popoverIsOpen"
    [style.top]="popoverPosition.y+'px'"
    [style.left]="popoverPosition.x+'px'"
    placement="right">
</span>

Ngx-bootstrap 弹出窗口出现在另一个位置

Ngx-bootstrap popover to appear at another location

frontend

ngx-bootstrap

angular