文章/答案/技术大牛

发布

社区首页 >问答首页 >ngx-引导中心一个模态上的子模态

问ngx-引导中心一个模态上的子模态
EN

Stack Overflow用户

提问于 2020-06-23 23:09:13

回答 1查看 1.6K关注 0票数 2

我有一个角形8应用程序使用ngx-引导v5.6.1打开一个模态，然后，在某些情况下，打开第一个模态之上的第二个模态。两种模式都工作得很完美，但第二种模式是以屏幕为中心，而不是下面的模式。这很可能是因为我通过了课程：‘md md模式-对话中心’到第二个模式，但我还没有找到一个方法来重新定位第二个模式，除了删除“居中”，使它出现在顶部。

我想把第二个模式移到屏幕上，也许会多10% - 20%。这两种模型都是它们自己的独立组件，因为我希望在整个应用程序中使第二种模式可重用。

以下是我如何调用modals

第一种模式：

this.bsModalRef = this.modalService.show(ModalComponent, { class: 'modal-lg', backdrop: 'static' });

第二种模式：

this.bsModalRefConf = this.modalService.show(ConfirmModalComponent, { class: 'modal-md modal-dialog-centered', backdrop: 'static' });

这两种方法都使用来自ngx的BsModalService引导/模式。

谢谢!

angular

bootstrap-modal

ngx-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-24 01:39:37

将.modal-dialog-centered应用于大模态，并将较小的模态向上移动，给它的.modal-content一个底部的裕度。它必须是两倍的大小，因为它的中心使用柔性箱。因此，要将其向上移动15vh (设备屏幕高度的15%)，您需要一个30vh的底部边距。

看到它工作(在扩展模式下)：

#exampleModalCenter2 .modal-content {
  margin-bottom: 30vh;
}
.modal-content {
  box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch first modal
</button>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModalCenter2">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

由于在另一种模式的基础上渲染背景只能使用恶意DOM操作，所以我使用box-shadow将它们可视化地分开。

一种更好的方法是改变较大模态的不透明度，而较小的模态被打开，并通过z-index降低其1。您可以使用以下方法实现这一目标：

javascript：根据小类是否打开而动态地向大型类添加一个类，并在没有js的情况下更改其applied.
css：类的opacity和z-index，只需将大类后面的类放在DOM中，作为兄弟，并使用~组合器。演示：

#exampleModalCenter2 .modal-content {
  margin-bottom: 20vh;
}
.modal-content {
  box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
}
.modal.show {
  opacity: 1;
  transition: opacity .3s ease-in-out;
}
.modal.show ~ .modal.show,
.modal.show ~ .modal.show * {
  opacity: .5;
  pointer-events: none;
  z-index: 1049;
}
.modal-backdrop.show ~ .modal-backdrop.show {
  opacity: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch first modal
</button>

<div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModalCenter2">Open second modal</button>
      </div>
    </div>
  </div>
</div>

..。这时，移动小的一个就变得不那么重要了。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62545130

复制

相似问题

问ngx-引导中心一个模态上的子模态
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ngx-引导中心一个模态上的子模态EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ngx-引导中心一个模态上的子模态
EN