私は $mdDialog をいじっていて、 Angular.org Demoからコードをそのままコピーしました。実行すると、例のようなオーバーレイ ダイアログではなく、現在のウィンドウに結果が表示されます。結果は各シナリオ (アラート、確認、プロンプト、カスタム、およびタブ) で同じであり、Chrome と Firefox の両方で実行されています。
次のCodePenは問題を再現します。CodePen で CSS と JS を使用した HTML を以下に示します。
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>MVA Intro to Angular</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="assets/css/fundraising-section.css" rel="stylesheet">
</head>
<!--<body ng-app="mainApp">-->
<body ng-controller="testDialogCtrl">
<div ng-controller="testDialogCtrl">
<md-button class="md-primary md-raised" ng-click="showAlert($event)">
Alert Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showConfirm($event)">
Confirm Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showPrompt($event)">
Prompt Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
Custom Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)">
Tab Dialog
</md-button>
</div>
<!-- /.container -->
<!--<script type="text/ng-template" id="uiSelect" src="app/shared/uiSelect.html"></script>-->
<script src="Scripts/angular/angular.js"></script>
<script src="Scripts/angular-material/angular-material.js"></script>
<script src="Scripts/angular-animate/angular-animate.js"></script>
<script src="Scripts/angular-aria/angular-aria.js"></script>
<script src="app/app.module.js"></script>
<!--<script src="app/main.js"></script>-->
<script type="text/javascript">
console.log("angular object", angular);
</script>
</body>
</html>
どんな考えでも大歓迎です。