CODEWITHSUNDEEP
twitter-bootstrapangularbootstrap-modalbootstrap-4ng-bootstrap
sridharan
sridharan

Reputation: 2065

Bootstrap 4 Modal appearing backdrop angular2

Using Bootstrap 4 in angular2 project,in multiple component in one component However, my modal is appearing underneath the grey fade (backdrop) and is non editable.enter image description here

firstComponent.html

<batopPage>
    <button class="btn btn-success" (click)="lgModal.show()">Large modal</button>
    <!-- Large modal -->
    <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" (click)="lgModal.hide()" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Large modal</h4>
          </div>
          <div class="modal-body">
           suscipit lobortis nisl ut aliquip ex ea commodo consequat.
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary confirm-btn" (click)="lgModal.hide()">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</batopPage>

firstComponent.ts

@Component({
  selector: 'firstcomponent',
  template: require('./firstComponent.html')
})
export class Modals {
  @ViewChild('childModal') childModal: ModalDirective;

  showChildModal(): void {
    this.childModal.show();
  }

  hideChildModal(): void {
    this.childModal.hide();
  }
}

otherComponent.html

<firstcomponent></firstcomponent>

Upvotes: 1

Views: 7055

Answers (3)

ZaZep
ZaZep

Reputation: 1

I know this issue is an old issue but I had a similar Issue on Angular 5, bootstrap 4 and this issue ranked rather high on my google searches.

I started having this issue when I added an animation to a component that contains a modal.

The piece of offending code in my project was:

export const menuAnimation =    trigger('MenuSlideInOut', [
  state('in', style({
    transform: 'translate3d(210px, 0, 0)'
  })),
  state('out', style({
    transform: 'translate3d(0%, 0, 0)'
  })),
  transition('in => out', animate('400ms 0.1s ease-in-out')),
  transition('out => in', animate('400ms 0.1s ease-in-out'))
])

It seems like any movement of the component containing the modal will break the modal.

Manually adjusting the z-index did not solve the issue. This issue only occurs when you use the standard js libraries that ships with bootstrap. Using a angular port of those libraries solves the issue. I used ngx-bootsrap , but ng-bootstrap might also work

Upvotes: 0

Cruz Jurado
Cruz Jurado

Reputation: 171

To make your modal editable:

option 1: add to your modal's html tag:

[config]="{backdrop: false}"

option 2: go to your main (s)css file and add:

.modal-backdrop {
  z-index: -1;
}

adjust your component's z-index accordingly...

Upvotes: 3

this.girish
this.girish

Reputation: 1306

please do inspect element check out classes applied to modal and main body in your page,i'm pretty sure this is because modal-backdrop active and stucked. here are few things you can do

1) just add data-dismiss="modal" to button

2)If modal hide or visible, faded background is remained and does not let you click any where you can forcefully remove those by using below piece of code.

first hide your modal div element.

$('modalId').modal('hide');

secondly remove 'modal-open' class from body and '.modal-backdrop' at the end of the page.

$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Upvotes: -1

Related Questions