时间戳

首页 > 解决方案 > 特定角度 5 组件之上的 Jquery/bootstrap 模式

javascript - 特定角度 5 组件之上的 Jquery/bootstrap 模式

问题描述

我bootstrap在我的 Angular 5 项目中使用模态来打开模态。但是我现在这样做的方式是让模态在整个屏幕上打开，这是我不希望发生的。

这是我的角度布局代码。

<div class="wrapper">
    <div class="sidebar" data-active-color="white" data-background-color="black" data-image="../assets/img/sidebar-1.jpg">
        <!-- <div class="sidebar" data-color="red" data-image=""> -->
        <sidebar-cmp></sidebar-cmp>
        <div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
    </div>
    <div class="main-panel">
        <navbar-cmp></navbar-cmp>
        <router-outlet></router-outlet>
        <div *ngIf="!isMap()">
            <footer-cmp></footer-cmp>
        </div>
    </div>
</div>

如您所见，有sidebar组件和router-outlet，模态存在于router-outlet组件中，但仍显示在sidebar组件顶部。两个组件并排显示。

这就是我在打字稿文件中显示模式的方式：

@ViewChild('DetailModal') detailRef: ElementRef;

$(this.detailRef.nativeElement);
$(this.detailRef.nativeElement).modal("show");

模态内容在组件的定义中：

<div>
   <!-- The definition of the Component that gets in the router-outlet-->

<div class=" container modal fade" #DetailModal>
    <app-detail-modal [Cert]="DCert"></app-detail-modal>
</div>

</div>

如何使模态仅显示在它所在的组件之上？

标签： javascriptjqueryangulartwitter-bootstrap-3

解决方案

您可以通过使您的容器位置相对和模态容器位置绝对来使用 css 将实际模态定位在容器内

#my-modal-container {
  height:300px;
  width: 600px;
  border: 4px solid green;
  position: relative;
}

.modal {
  position: absolute;
}

然后，您可以隐藏引导覆盖并将其替换为内联覆盖。

// Hide the default backdrop
.modal-backdrop {
   display: none;
}

// Make another backdrop with styles copied from the jQuery one, and
// place it alongside your modal component
body.modal-open .inline-modal-backdrop {
    position: absolute;
    opacity: 0.5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

然后您可以将所有这些包装在一个包含 bs 模态容器和新的内联背景的角度组件中

<div class="modal"><ng-content></ng-content></div>
<div class="inline-modal-backdrop"></div>

这是一个codepen（没有角度）

https://codepen.io/anon/pen/rKvQLX

推荐阅读