I am using bootstrap
modal in my angular 5 project to open modals. But the way I am doing it right now is making the modal open up on top of the whole screen which I don't want to happen.
here is my angular layout code.
<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>
as you can see there is the sidebar
component and the router-outlet
, the modal is present in the router-outlet
component but it is still displayed on top of the sidebar
component. both components are shown side by side.
this is how I show the modal in my typescript file :
@ViewChild('DetailModal') detailRef: ElementRef;
$(this.detailRef.nativeElement);
$(this.detailRef.nativeElement).modal("show");
the modal content is in the definition of the component :
<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>
how can I make the modal only show on top of the component it is in ?
You can position the actual modal inside your container with css by making your container position relative, and the modal container position absolute
#my-modal-container {
height:300px;
width: 600px;
border: 4px solid green;
position: relative;
}
.modal {
position: absolute;
}
You can then hide the bootstrap overlay and replace it with an inline one.
// 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;
}
Then you can wrap all this up in an angular component that contains the bs modal container and your new inline backdrop
<div class="modal"><ng-content></ng-content></div>
<div class="inline-modal-backdrop"></div>
Here is a codepen (without angular)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.