I am calling Cascading modal register / login modal from another component (followed https://mdbootstrap.com/docs/angular/modals/basic/), but it won't show up, I can see the grayed out background when clicking on the button so I guess it's showing up in the background or so may be.

Isolation: i) If I change the modal html which is present in the tutorial, I can see the modal. ii) I tried few things and when I remove class="modal fade top" then I can see the modal showing up, Can you please help with why it doesn't show up with class="modal fade top" iii) when I am calling the below modal from the same component it shows up properly.

Resources (screenshots, code snippets etc.)

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

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