Question

我搜索过以前关于类似问题的SO帖子，但是这些中提出的解决方案均不适用于这种情况。

我有一个用户单击按钮时打开的模式。在该模式下，是指向其他网站的链接。当用户单击其中一个链接时，他们会收到另一个弹出窗口模式，并与他们确认要离开当前站点转到另一个站点。

当用户单击其中一个链接时，第二个模态将放置在第一个模态的后面。我正在尝试使第二个模态与第一个模态重叠。

当第二个模态打开时，我不能简单地关闭第一个模态，我从事的业务有非常具体的标准来满足他们的需求。我还在调试其他人的代码，所以我对所发生的一切并不完全熟悉。

我的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-index，但是它不起作用。我可以进行哪些更改，以便在打开第二个模态时在第一个模态的前面打开它？

一些其他有用的信息，这是一个Angular 7应用程序，它们使用的是bootstrap4，我们不能使用JQuery或任何外部包。

打开模态时，我想在原始模态的顶部打开另一个模态。目前，第二个模式已放置在第一个模式

0 个答案: