Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

hasBackdrop: false prevents transparent overlay behind modal

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

willshowellcommented, Feb 1, 2018

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.

0reactions

angular-automatic-lock-bot[bot]commented, Sep 11, 2019

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

Top Results From Across the Web

How to close a mat dialog without a backdrop on clicking ...

by clicking outside ? This works fine if I remove the property hasBackdrop: false -> Working Stackblitz Example · angular · angular-material ...

How To Use Opacity and Transparency to Create a Modal in ...

The disclaimer modal, with the rest of the page visible behind a translucent black background. Now that the overlay is transparent, turn to...

Help Popup with Angular Material CDK Overlay

When hasBackdrop is true , the overlay has a backdrop element, which is an element rendered beneath the overlay over the complete viewport....

Overlay | Angular Material

Overlays are dynamically added pieces of floating UI, meant to be used as a low-level building block for other components. Dialogs, tooltips, menus,...

Modal backdrop: static not allowing clicks without closing t

config: { backdrop: false, ignoreBackdropClick: true, class: 'modal-lg ... and prevents the closing, I am not allowed to interact with the forms behind...