Question

我正在尝试定位一个按钮元素，该按钮元素可以有一个弹出弹出窗口，其内部有一个表单，供用户记笔记，但我似乎有问题，弹出窗口没有出现在哪里应该。最初看起来很好，但是当用户向下滚动页面并尝试打开按钮时，弹出窗口显示在位置之外，在屏幕下方，屏幕越远，用户向下滚动。

HTML：

export class ABC_Component {
  private xyzObj: XYZ_Class;

  constructor(){
   this.xyzObj = new XYZ_Class();
  }
}

class XYZ_Class {

}

CSS：

<button type="button" id="showNotes"  uib-popover-template="$scope.dynamicPopover.templateUrl" popover-placement="right" class="btn feedback-btn btn-info pull-right hidden-xs hidden-sm"> Feedback</button>

<script type="text/ng-template" id="myPopoverTemplate.html">

    <div class="row">
         <div class="col-md-12">
            <strong> Notes</strong>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <textarea rows="4" cols="40" ng-model="$scope.notes"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-1 col-md-10">
            <button class="btn btn-primary btn-sm" ng-click="$scope.saveNotes()"> Save Notes </button>
        </div>
    </div>
</script>

JavaScript的：

.feedback-btn {
    position: fixed;
    top: 275px;
    left: -31px;
    overflow: hidden;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

滚动后如何在固定元素上保持popover？

0 个答案: