use*_*008 2 html css angularjs angular-material
我试图只在不在整个身体上的div上应用md-dialog,这样我就可以在打开md对话框时在header div中使用textbox.
示例: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
要在特定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;
}
| 归档时间： |
|
| 查看次数： |
6738 次 |
| 最近记录： |