在 div 而非整体 body 上显示 md-dialog

Question

我试图只在 div 上应用 md-dialog 而不是在整个 body 上应用 md-dialog ，这样我就可以在 header [=33= 中使用文本框] 当 md-dialog 打开时。

示例：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

Answer 1

要将对话框置于特定 div 之上，您必须提供父项和 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 而非整体 body 上显示 md-dialog

Show md-dialog on a div not on whole body

html

css

angularjs

angular-material