我尝试仅将 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>
Controller :
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。 只有 secondary_div 应该显示对话框。 这样，当向用户显示对话框时，用户应该能够在第一个 div 中输入详细信息。
查看 CodePen 了解更多信息 Code Pen Link
最佳答案
要将对话框放置在特定 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;
}
关于html - 在 div 上显示 md-dialog，而不是在整个 body 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31484898/