Components: hasBackdrop: false prevents transparent overlay behind modal

[hoangnguyen208]

Bug, feature request, or proposal:

When I set hasBackdrop: false, the overlay behind modal is not dark and transparent as expected

What is the expected behavior?

I expect the same behavior as hasBackdrop: true, the overlay behind modal is dark and transparent

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-4gl8gc

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5, @angular/material & @angular/cdk: 5.1.1

[willshowell]

That is expected behavior. The 'transparent overlay' behind the modal is the backdrop. What is it that you're trying to accomplish by setting hasBackdrop: false?

[hoangnguyen208]

Oh really? I did not it's the expected behavior. Is it possible to customize the back layer as normal backdrop if I still set hasBackdrop: false ? Or how to disable clicking outside to close modal without setting hasBackdrop: false ? I used ng-bootstrap before and even I set backdrop to false, I still had normal backdrop but disable clicking outside modal to close it. Therefore, I just want to know that if material has this feature. Thank you in advance.

[willshowell]

Rather than setting hasBackdrop to false, I think what you'd like to do is use disableClose: true so that the user cannot close the modal via clicking on the backdrop.

[hoangnguyen208]

Thank you so much, it works.

[RatanKumar678]

Rather than setting hasBackdrop to false, I think what you'd like to do is use disableClose: true so that the user cannot close the modal via clicking on the backdrop.

thanks ,this works for me "hasBackdrop:true"

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}