Jquery 角度10：模型窗口在第二次单击中未打开
我面临一个模型窗口的问题。模型窗口出现在导航栏和覆盖的背景中。这是因为我们正在使用第三方bundle.js。js正在父容器下添加动态类和div。对于一个类，他们使用位置：fixed。i、 e.模型窗口将进入后台。如果我们使用appendTo（'body'）.model（）；在这种情况下，模型窗口在第一次单击时正确打开，但在第二次单击时不会打开。因为该模型html不在该组件下。它显示modalImage.length=0 如果我们将模型html放在index.html中父容器的外面。在这种情况下，它工作良好，但角度不支持这一点。有角度的刚打开模型，组件内部没有外部 对于这种情况，我应该怎么做？如何处理？我做错什么了吗 Index.htmlJquery 角度10：模型窗口在第二次单击中未打开,jquery,angular,bootstrap-4,Jquery,Angular,Bootstrap 4,我面临一个模型窗口的问题。模型窗口出现在导航栏和覆盖的背景中。这是因为我们正在使用第三方bundle.js。js正在父容器下添加动态类和div。对于一个类，他们使用位置：fixed。i、 e.模型窗口将进入后台。如果我们使用appendTo（'body'）.model（）；在这种情况下，模型窗口在第一次单击时正确打开，但在第二次单击时不会打开。因为该模型html不在该组件下。它显示modalImage.length=0 如果我们将模型html放在index.html中父容器的外面。在这种情况下，
<body class="multi-app">
<div id="parent-container">
<div>
<div>
<cfapp-root></cfapp-root>
</div>
</div>
</div>
</body>
@Component({
selector: 'cfapp-root',
template: `<router-outlet></router-outlet>`,
styleUrls: ['./app.component.css']
})
import { Component, OnInit, ViewChild } from '@angular/core';
import { BuyersComponent } from "../buyers/buyers.component";
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
@ViewChild(BuyersComponent, { static: true }) buyerPop: BuyersComponent;
constructor() { }
ngOnInit(): void {
}
popupBuyerNetSheet(event: any) {
this.buyerPop.openBuyerPOPUP(event);
}
callCountyComp(event: any){
}
}
openBuyerPOPUP(event) {
let modalImage = $(this.elementRef.nativeElement).find("div#BuyerPopUpHtml");
modalImage.modal("show");
}
<div class="col-6 col-xl-4 opt-box">
<a href="javascript:void(0)" class="box-inner h-100 bg-2 text-center"
(click)="popupBuyerNetSheet($event)">
<div class="box-icon d-inline-flex align-items-center justify-content-center">
<img src="assets/images/icons.svg" alt="" width="26">
</div>
<h6 class="box-title">Buyer Pop Up</h6>
<p class="box-subtitle d-none d-xl-block">Closing Costs</p>
</a>
</div>
<div class="modal fade" id="BuyerPopUpHtml" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
This is body.
</div>
</div>
</div>
<div class="col-6 col-xl-4 opt-box">
<a href="javascript:void(0)" class="box-inner h-100 bg-2 text-center"
(click)="popupBuyerNetSheet($event)">
<div class="box-icon d-inline-flex align-items-center justify-content-center">
<img src="assets/images/icons.svg" alt="" width="26">
</div>
<h6 class="box-title">Buyer Pop Up</h6>
<p class="box-subtitle d-none d-xl-block">Closing Costs</p>
</a>
</div>
<div class="modal fade" id="BuyerPopUpHtml" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
This is body.
</div>
</div>
</div>
这是尸体。
npm install --save @ng-bootstrap/ng-bootstrap
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
您可以增加模态的
z-index