时间戳

首页 > 解决方案 > 如何创建一个弹出元素以超过 md-dialog？

angularjs - 如何创建一个弹出元素以超过 md-dialog？

问题描述

我正在使用 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');
                  
  }

这是示例

在此处输入图像描述

标签： angularjsangularjs-material

解决方案

您需要将“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 以确保它位于顶部

这是一个工作示例

推荐阅读