angularjs - 如何创建一个弹出元素来覆盖 md-dialog？

Question

我正在使用 AngularJs 1.7，并且我创建了一个下拉元素，我想将其添加到 md-dialog，问题是我的元素(my-popup)始终保持在 md-dialog 的限制中 - 就像在这里

我想实现日期选择器的相同行为 - 正如您所看到的 - 它出现在正确的位置和 md 对话框中 - 我想知道它是如何做到的。
我试图将弹出窗口附加到 body ，但这种方式弄乱了弹出窗口的位置 - 我想有更好的方法。

 $scope.open = function(){
      $scope.isShowMyPopUp = !$scope.isShowMyPopUp;
 if(!!$scope.isShowMyPopUp){
        let modalContainer = $('#myPopUp');
        modalContainer.detach();
        modalContainer.appendTo('body');
                  
  }

这是 Example

Answer 1

您需要将您的“myPopUp”div 直接放在对话框内容中，并像下面这样修改您的 css
HTML :

    <md-dialog aria-label="Mango (Fruit)" class="mango-dialog">
   <form ng-cloak>
      <md-toolbar>
         <div class="md-toolbar-tools">
            <h2>Mango (Fruit)</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
               <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
         </div>
      </md-toolbar>
      <md-dialog-content>
         <div class="my-popup" ng-show="isShowMyPopUp" id-"myPopUp">
            <div ng-repeat="item in daySelect">
               <md-button class="md-raised md-primary" ng-class="{'selected':item.isSelected}" ng-click="select(item)">  {{item.text}}</md-button>
            </div>
         </div>
         <div class="md-dialog-content">
            <div layout-gt-xs="row">
               <div flex-gt-xs>
                  <h4>Standard date-picker</h4>
                  <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"></md-datepicker>
               </div>
               <div flex-gt-xs style="position:relative;">
                  <h4>my-popup</h4>
                  <md-button class="md-raised md-primary" ng-click="open()">Open</md-button>
               </div>
            </div>
         </div>
      </md-dialog-content>
   </form>
</md-dialog>

CSS :

.my-popup{
  position:absolute;
  top: 48px;
    left: 104px;
  width:250px;
  height:250px;
  background-color:gray;
      z-index: 999;
    overflow: auto;
}
md-dialog{
  width:40%;
}

.selected {
  background-color:green!important;
}

.mango-dialog {
   overflow: visible;
}

我在你的对话框中添加了 mango-dialog 类以允许溢出，我还在弹出窗口中添加了 z-index 以确保它位于顶部
这是一个工作 example