Bootstrap UI Angular 模态框未作为弹出窗口显示

Question

我所拥有的是：https://rawgit.com/emilyeserven/testwebsites/master/js/angular/chara-select/index.html。

底部有打开模态框的按钮，但是当它们被点击时，它们只显示在顶部，并且没有更多的bootstrap按钮样式。

当前的模态框代码是从Bootstrap UI演示站点中改编来的（我只改变了应用程序模块的名称）。未修改的代码已在MAMP沙盒中进行了测试，因此我知道它是正常工作的。我不确定问题出现在哪里，因为控制台没有显示任何异常错误。

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

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

如果您能指引我正确的方向，我将非常感激！

- Emily Serven

---

https://dev59.com/3nNA5IYBdhLWcg3wBo9m - Dev Team

Answer 1

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

- aggiustino

---

这就是了，非常感谢！GitHub仓库已经更新。 :) - Emily Serven

Answer 2

<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>

- test

---

请检查您的答案是否能够适应所问的问题。您的答案似乎是 Angular，而问题要求的是 AngularJS。尝试添加一些注释到您的代码片段中，以帮助读者理解正在发生什么以及它如何有助于回答问题。 - casenonsensitive

.col-xl-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } - test