При открытии модального я хочу открыть другой модальный поверх оригинального. В настоящее время второй модал находится позади первого

Question

Я просматривал предыдущие сообщения SO относительно подобных проблем, но ни одно из предложенных решений не работает для этой ситуации.

У меня есть один модальный режим, который открывается, когда пользователь нажимает кнопку. В этом модале ссылки на другие сайты. Когда пользователь нажимает одну из ссылок, он получает другой всплывающий мод, подтверждающий, что он покидает текущий сайт, чтобы перейти на другой.

Когда пользователь нажимает одну из ссылок, размещается 2-й модалза первым модалом. Я пытаюсь сделать так, чтобы 2-й модал перекрывал первый модальный.

Я не могу просто закрыть первый модальный, когда открывается 2-й, бизнес, в котором я работаю, имеет очень специфические критерии для того, что они хотят. Я также отлаживаю чужой код, поэтому я не совсем знаком со всем, что происходит.

Мой HTML-файл:

<!-- Modal 1 -->
<modal class="slp-view-award green show" id="carModal">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="view-award"><i class="fa fa-flag" aria-hidden="true"></i>REPORT</h5>
    <button type="button" class="close text-light" data-dismiss="modal" aria-label="Close" (click)="refreshData()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <ol>
      <li>
        <a class="navlink" (click)="open1(link1)">website1</a>
      </li>
      <li><a class="navlink" (click)="open2(link2)">website2</a>
      </li>
    </ol>
  </div>
</div>
</div>
</modal>

<!-- Modal 2 -->
<modal class="modal fade" tabindex="-1" id="sms-timeout-confirm" role="dialog" aria-labelledby="Time Out Warning" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
    <div class="modal-content">
        <div class="modal-body justify-content-center">
            <div class="row">
                <div class="col-12">
                    <h3 class="text-center">You are leaving this website</h3>
                    <!-- <p>Hello</p> -->
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
            <button type="button" class="btn btn-secondary close-modal" aria-label="cancel">Stay Here</button>
            <button type="button" id="continueWorking" class="btn btn-success" aria-label="Continue Working" data-dismiss="modal" (click)="goTo()">Redirect Me</button>
        </div>
    </div>
</div>
</modal>
<button #openSSNFafsaButton id="openSSNFafsaButton" [hidden]="true" data-toggle="modal" data-target="#sms-timeout-confirm"><!--Open Modal--></button>

Файл CSS:

hr {
  border-top: 4px solid #155724;
}

#slp-print-view-card .modal-header {
  border-bottom: 1px solid #333;
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;
}

#slp-print-view-card .modal-title {
  font-size: 1.5rem;
}

.slp-print-view-card .modal-content {
  height: 800px;
}
.slp-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#carModal {
  z-index: 99989;
}

#sms-timeout-confirm {
  z-index: 99999;
}

Я пытался настроить Z-индекс между этими двумя значениями, но он не работает. Какие изменения я могу сделать так, чтобы 2-й модал, когда он открыт, был открыт перед 1-м модом?

Некоторая дополнительная информация, которая может быть полезна, это приложение Angular 7, они используют bootstrap4, мыне может использовать JQuery или любые внешние пакеты.