Javascript 特定angular 5组件顶部的Jquery/bootstrap模式

我在angular 5项目中使用

bootstrap

modal打开modals。但我现在的做法是在整个屏幕上打开模式，这是我不希望发生的

这是我的角度布局代码

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

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

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

---

如何使模态仅显示在其所在组件的顶部？

通过使容器位置相对，模态容器位置绝对，可以使用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>

这是一支电码笔（没有角）

---

这取决于引导如何实现其模式。检查您的页面并检查是否在页面的根目录中添加div并将其放置在所有内容上。如果是这样的话，你可以使用CSS覆盖背景，而不是覆盖所有内容。我需要背景和模态本身位于组件的顶部，而不仅仅是背景。所以模态的大小也会改变。是否真的有什么办法可以欺骗插件，使其认为组件就是整个屏幕？尽量不要将其视为插件，它只是页面中的一些css和JS定位元素。也许bootstrap实现其模态的方式不适合您想要做的事情。定位模态本身应该很容易，因为它实际上在组件内部，我认为困难的部分是要么让模态背景做你想要的，要么添加样式以防止背景显示，并添加你自己可以定位在组件内部的样式。下面是一个将模态本身放置在容器中的示例。下一步是对背景做些什么。好的，更新它。它现在隐藏默认背景并添加自定义内联背景，

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