Angular Material Dialog
home
Run
screen_rotation
fullscreen
cloud_download
navigate_before
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial']) .controller('MyController', function ($scope, $mdDialog) { //controller code goes here... $scope.showPrerenderedDialogBox = function(ev) { $mdDialog.show({ controller: dialogCtr, contentElement: '#myDialogBox', parent: angular.element(document.body), targetEvent: ev, clickOutsideToClose: true }); }; function dialogCtr($scope, $mdDialog) { $scope.hide = function() { $mdDialog.hide(); }; $scope.cancel = function() { $mdDialog.cancel(); }; $scope.answer = function(answer) { $mdDialog.hide(answer); }; } }); </script> </head> <body ng-app="myApp"> <div ng-controller="MyController" ng-cloak="" > <md-content layout-padding layout="row"> <md-button class="md-primary md-raised" ng-click="showPrerenderedDialogBox($event)" > Show Pre Rendered Dialog </md-button> <div style="visibility: hidden"> <div class="md-dialog-container" id="myDialogBox"> <md-dialog layout-padding> <h2>Pre-Rendered Dialog Box Example</h2> <p> Content goes..... here. </p> </md-dialog> </div> </div> </md-content> </div> </body> </html>
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial']) .controller('MyController', function ($scope, $mdDialog) { //controller code goes here... $scope.showPrerenderedDialogBox = function(ev) { $mdDialog.show({ controller: dialogCtr, contentElement: '#myDialogBox', parent: angular.element(document.body), targetEvent: ev, clickOutsideToClose: true }); }; function dialogCtr($scope, $mdDialog) { $scope.hide = function() { $mdDialog.hide(); }; $scope.cancel = function() { $mdDialog.cancel(); }; $scope.answer = function(answer) { $mdDialog.hide(answer); }; } }); </script> </head> <body ng-app="myApp"> <div ng-controller="MyController" ng-cloak="" > <md-content layout-padding layout="row"> <md-button class="md-primary md-raised" ng-click="showPrerenderedDialogBox($event)" > Show Pre Rendered Dialog </md-button> <div style="visibility: hidden"> <div class="md-dialog-container" id="myDialogBox"> <md-dialog layout-padding> <h2>Pre-Rendered Dialog Box Example</h2> <p> Content goes..... here. </p> </md-dialog> </div> </div> </md-content> </div> </body> </html>
Copyrights@tutorialsplane.com