Question

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

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

当前的模态代码改编自Bootstrap UI演示站点（我只更改了app模块的名称）。未经修改的代码在MAMP的沙箱中测试了代码，所以我知道它有效。我不确定问题的确切位置，因为控制台没有显示任何不寻常的错误。

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

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

非常感谢任何帮助我指出正确方向的帮助！

Answer 1

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

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>

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

2 个答案: