How to remove md-dialog's background completely?

Question

I'm using AngularJs with Angular-Material and Jquery-ui for creating a floating and draggable dialog window - i was manage to create what i want - the problem is that the md-dialog has a container div (md-dialog-container) that stretched all over the page - and prevent pressing any buttons outside the dialog.

I wonder how i can disable the background in some way to be able to press any button in the page when the dialog is open.

I've set the md-dialog 'hasBackdrop' option to false - i guess it wasn't enough.

let dialogOptionsObj = {
  controller: 'DialogController',
  templateUrl: 'dialog-tpl.html',
  parent: angular.element(document.body),
  panelClass: 'myClass',
  hasBackdrop: false, // this is what cancels the gray background
  autoWrap: false,
  clickOutsideToClose: false,
  preserveScope: true,
  fullscreen: false,
};

I've found that if the md-dialog container is completely removed (md-dialog-container) and the md-dialog is appending directly to the document.body then it's working - i'm looking for a better solution since i want it to be with less Jquery as possible.

Code

Answer 1

You just have to set the CSS property pointer-events.

If you want the click to "go through" the element, the value to use is none.

So you juste have to add the following CSS :

.dialog-basic-size{
   pointer-events: auto;
}

.md-dialog-container , .md-scroll-mask {
  pointer-events: none;
}

Demo

You can read more about the pointer-event here

Answer 2

I think you chose not the best direction.

I wonder how i can disable the background in some way to be able to press any button in the page when the dialog is open.

It is like: "I want a steel box with four doors, so I decided to buy a car and remove the wheels and engine."

You try to break the concept of dialog (Wiki). It is designed to avoid all event propagation a.e. clicks outside the dialog box to make a focus of users on specific information like alert, warning, and so on.

---

... creating a floating and draggable ...

You have enough libraries for Angularjs, that work with divs (position: absolute) just google it :)