在 div 上显示 md-dialog，而不是在整个身体上答案

【问题标题】：Show md-dialog on a div not on whole body在 div 上显示 md-dialog，而不是在整个身体上
【发布时间】：2015-10-07 17:03:08
【问题描述】：

我试图将 md-dialog 仅应用于 div 而不是整个 body ，以便在打开 md-dialog 时可以在标题 div 内使用文本框。

示例：HTML

<body>
  <div id="first_div">
    <input type="text">
  </div>
  <div>
    <div id="second_div">
      <md-content>
        <md-button ng-click="showDialog($event)">Launch Dialog</md-button>
      </md-content>
    </div>
  </div>
</body>

控制器：

 function showDialog($event) {
    var parentEl = angular.element(document.querySelector('md-content'));
    alert = $mdDialog.alert({
      parent: parentEl,
      targetEvent: parentEl,
      template:
        '<md-dialog aria-label="Sample Dialog">' +
        '  <md-content>'+
        '    </md-list>'+
        '  </md-content>' +
        '  <div class="md-actions">' +
        '    <md-button ng-click="ctrl.closeDialog()">' +
        '      Close Greeting' +
        '    </md-button>' +
        '  </div>' +
        '</md-dialog>',
        locals: {
          closeDialog: $scope.closeDialog
        },
        bindToController: true,
        controllerAs: 'ctrl',
        controller: 'DialogController'
    });

从上面的例子中，我想让 first_div 独立于 md-dialog。只有 second_div 应该显示对话框。这样当对话框显示给用户时，用户应该能够在第一个 div 中输入详细信息。

查看 CodePen 了解更多信息 Code Pen Link

【问题讨论】：

标签： html css angularjs angular-material

【解决方案1】：

要将对话框定位在特定 div 上方，您必须提供 parent 和 targetEvent ：

$scope.showAlert = function(ev) {
    $mdDialog.show(
      $mdDialog.alert()
        .parent(angular.element(document.querySelector('#second_div')))
        .clickOutsideToClose(true)
        .title('This is an alert title')
        .content('You can specify some description text in here.')
        .ariaLabel('Alert Dialog Demo')
        .ok('Got it!')
        .targetEvent(ev)
    );
};

之后，为了使您的输入可用，您必须将“z-index”应用于包含您的输入的 div。

CSS

#first_div{
    z-index:1000;
}

【讨论】：

所以你实际上是在说我使用 Div 而不是 md-dialog ??如果你有例子那就太好了
他们的例子虽然工作似乎使用 md-content 作为父母，这不是你说的对吗？ var parentEl = angular.element(document.querySelector('md-content'));