I am trying to use below cascaded modal, but instead of close buttons at bottom I am trying to add the close icon at the top right , I tried placing close icon at various places, but it just gets hidden behind the tabs

<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true">&times;</span>
        </button>

I am trying to use this in below snippet

    <button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample"
        (click)="frame.show()" mdbWavesEffect>Launch Modal
</button>

<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog cascading-modal" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Modal cascading tabs-->
      <div class="modal-c-tabs">

        <!-- Tab panels -->
        <mdb-tabset #staticTabs [buttonClass]="'nav md-tabs tabs-2 light-blue darken-3'" [contentClass]="''"
                    class="tab-content">
          <!--Panel 7-->
          <mdb-tab class="tab-pane fade in show active" id="panel7" role="tabpanel"
                   heading="<mdb-icon fas icon='user' class='mr-1'></mdb-icon> Login">

            <!--Body-->
            <div class="modal-body mb-1">
              <div class="md-form form-sm">
                <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
                <input mdbInput mdbValidate type="text" id="form22" class="form-control"
                       [formControl]="modalFormLoginEmail">
                <label for="form22">Your email</label>
                <mdb-error
                  *ngIf="modalFormLoginEmail.invalid && (modalFormLoginEmail.dirty || modalFormLoginEmail.touched)">
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="modalFormLoginEmail.valid && (modalFormLoginEmail.dirty || modalFormLoginEmail.touched)">Input
                  valid
                </mdb-success>
              </div>

              <div class="md-form form-sm">
                <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                <input mdbInput mdbValidate type="password" id="form23" class="form-control"
                       [formControl]="modalFormLoginPassword">
                <label for="form23">Your password</label>
                <mdb-error
                  *ngIf="modalFormLoginPassword.invalid && (modalFormLoginPassword.dirty || modalFormLoginPassword.touched)">
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="modalFormLoginPassword.valid && (modalFormLoginPassword.dirty || modalFormLoginPassword.touched)">
                  Input valid
                </mdb-success>
              </div>
              <div class="text-center mt-2">
                <button mdbBtn color="info" class="waves-light" mdbWavesEffect>Log in
                  <mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
                </button>
              </div>
            </div>
            <!--Footer-->
            <div class="modal-footer display-footer">
              <div class="options text-center text-md-right mt-1">
                <p>Not a member?
                  <a href="#" class="blue-text">Sign Up</a>
                </p>
                <p>Forgot
                  <a href="#" class="blue-text">Password?</a>
                </p>
              </div>
              <button type="button" mdbBtn color="info" outline="true" class="ml-auto" data-dismiss="modal"
                      (click)="frame.hide()" mdbWavesEffect>Close
              </button>
            </div>

          </mdb-tab>
          <!--/.Panel 7-->

          <!--Panel 8-->
          <mdb-tab class="tab-pane fade" id="panel8" role="tabpanel"
                   heading="<mdb-icon fas icon='user-plus' class='mr-1'></mdb-icon> Register">

            <!--Body-->
            <div class="modal-body">
              <div class="md-form form-sm">
                <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
                <input mdbInput mdbValidate type="text" id="form24" class="form-control"
                       [formControl]="modalFormRegisterEmail">
                <label for="form24">Your email</label>
                <mdb-error
                  *ngIf="modalFormRegisterEmail.invalid && (modalFormRegisterEmail.dirty || modalFormRegisterEmail.touched)">
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="modalFormRegisterEmail.valid && (modalFormRegisterEmail.dirty || modalFormRegisterEmail.touched)">
                  Input valid
                </mdb-success>
              </div>

              <div class="md-form form-sm">
                <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                <input mdbInput mdbValidate type="password" id="form25" class="form-control"
                       [formControl]="modalFormRegisterPassword">
                <label for="form25">Your password</label>
                <mdb-error
                  *ngIf="modalFormRegisterPassword.invalid && (modalFormRegisterPassword.dirty || modalFormRegisterPassword.touched)">
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="modalFormRegisterPassword.valid && (modalFormRegisterPassword.dirty || modalFormRegisterPassword.touched)">
                  Input valid
                </mdb-success>
              </div>

              <div class="md-form form-sm">
                <mdb-icon fas icon="lock" class="prefix"></mdb-icon>
                <input mdbInput mdbValidate type="password" id="form26" class="form-control"
                       [formControl]="modalFormRegisterRepeatPassword">
                <label for="form26">Repeat password</label>
                <mdb-error
                  *ngIf="modalFormRegisterRepeatPassword.invalid && (modalFormRegisterRepeatPassword.dirty || modalFormRegisterRepeatPassword.touched)">
                  Input invalid
                </mdb-error>
                <mdb-success
                  *ngIf="modalFormRegisterRepeatPassword.valid && (modalFormRegisterRepeatPassword.dirty || modalFormRegisterRepeatPassword.touched)">
                  Input valid
                </mdb-success>
              </div>

              <div class="text-center form-sm mt-2">
                <button mdbBtn color="info" class="waves-light" mdbWavesEffect>Sign up
                  <mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
                </button>
              </div>

            </div>
            <!--Footer-->
            <div class="modal-footer">
              <div class="options text-right">
                <p class="pt-1">Already have an account?
                  <a href="#" class="blue-text">Log In</a>
                </p>
              </div>
              <button type="button" mdbBtn color="info" outline="true" class="ml-auto" data-dismiss="modal"
                      (click)="frame.hide()" mdbWavesEffect>Close
              </button>
            </div>
          </mdb-tab>
          <!--/.Panel 8-->
        </mdb-tabset>

      </div>
    </div>
    <!--/.Content-->
  </div>
</div>