Bootstrap UI Angular 模态不显示为弹出窗口

Question

我有什么：https://rawgit.com/emilyeserven/testwebsites/master/js/angular/chara-select/index.html

底部是打开模式框的按钮。但是，当它们被点击时，它们只会显示在顶部，而不仅仅是引导按钮样式。

目前的模态代码改编自Bootstrap UI demo site（我只是改了app模块的名字）。未修改的代码在 MAMP 的沙箱中测试了代码，所以我知道它有效。我不确定问题出在哪里，因为控制台没有显示任何异常错误。

任何直接与模态相关的 HTML 代码都在 index.html 的底部。同样，任何直接与模态相关的 JS 都在 js/modal.js 中。

GitHub 存储库：https://github.com/emilyeserven/testwebsites/tree/master/js/angular/chara-select

任何帮助我指出正确的方向将不胜感激！

Answer 1

<mat-toolbar>
  <span>{{service.form.controls['$key'].value?"Modify Employee":"New Employee"}}</span>
  <span class="fill-remaining-space"></span>
  <button class="btn-dialog-close" mat-stroked-button (click)="onClose()" tabIndex="-1"><mat-icon>clear</mat-icon></button>
</mat-toolbar>
<form [formGroup]="service.form" class="normal-form" (submit)="onSubmit()">
  <mat-grid-list cols="2" rowHeight="300px">
    <mat-grid-tile>
      <div class="controles-container">
        <input type="hidden" formControlName="$key">
        <mat-form-field>
          <input formControlName="fullName" matInput placeholder="Full Name*">
          <mat-error>This field is mandatory.</mat-error>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="email" matInput placeholder="Email">
          <mat-error>Invalid email address.</mat-error>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="mobile" matInput placeholder="Mobile*">
          <mat-error *ngIf="service.form.controls['mobile'].errors?.required">This field is mandatory.</mat-error>
          <mat-error *ngIf="service.form.controls['mobile'].errors?.minlength">Minimum 8 charactors needed.</mat-error>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="city" matInput placeholder="City">
        </mat-form-field>
      </div>
    </mat-grid-tile>
    <mat-grid-tile>
      <div class="controles-container">
        <div class="add-bottom-padding">
          <mat-radio-group formControlName="gender">
            <mat-radio-button value="1">Male</mat-radio-button>
            <mat-radio-button value="2">Female</mat-radio-button>
            <mat-radio-button value="3">Other</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-form-field>
          <mat-select formControlName="department" placeholder="Department">
            <mat-option>None</mat-option>
            <ng-container *ngFor="let department of departmentService.array">
              <mat-option value="{{department.$key}}">{{department.code}}-{{department.name}}</mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="hireDate" matInput [matDatepicker]="picker" placeholder="Hire Date">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
        <div class="add-bottom-padding">
          <mat-checkbox formControlName="isPermanent">Permanent Employee</mat-checkbox>
        </div>
        <div class="button-row">
          <button mat-raised-button color="primary" type="submit" [disabled]="service.form.invalid">Submit</button>
          <button mat-raised-button color="warn" (click)="onClear()">Clear</button>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</form>

Answer 2

据我所知，您正在使用自定义构建的引导程序。 它不包含任何模式的样式。 尝试加载 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 而不是 bootstrap.css，它会起作用。