Как полностью удалить фон md-диалога? - PullRequest
Новая
       34

Как полностью удалить фон md-диалога?

1 голос
/ 28 апреля 2020

Я использую AngularJs с Angular -Material и Jquery -ui для создания плавающего и перетаскиваемого диалогового окна - мне удалось создать то, что я хочу - проблема в том, что md- В диалоговом окне есть контейнер div (md-dialog-container), который растягивается по всей странице и предотвращает нажатие любых кнопок вне диалогового окна.

Интересно, как можно каким-то образом отключить фон, чтобы можно было нажимать любую кнопку на странице, когда диалог открыт.

Я установил md-диалог 'hasBackdrop' вариант false - я думаю, этого было недостаточно. 

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,
};

Я обнаружил, что если контейнер md-dialog полностью удален (md-dialog-container) и md-диалог добавляется напрямую к document.body, то он работает - я ищу лучшее решение, так как я хочу, чтобы оно было как можно меньше Jquery.

Код

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Вам просто нужно установить свойство CSS pointer-events.

Если вы хотите, чтобы щелкнул элемент «go», используйте значение none.

Итак, вам просто необходимо добавить следующее CSS: 

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

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

Демо

Подробнее о указателе-событии можно прочитать здесь

0 голосов
/ 28 апреля 2020

Я думаю, вы выбрали не лучшее направление.

Интересно, как можно каким-то образом отключить фон, чтобы можно было нажимать любую кнопку на странице, когда диалоговое окно открыто.

Это как: «Я хочу стальной ящик с четырьмя дверями, поэтому я решил купить машину и снять колеса и двигатель.»

Вы пытаетесь нарушить концепцию диалога ( Wiki ). Он предназначен для того, чтобы исключить все распространения событий за пределами диалогового окна, чтобы сфокусировать внимание пользователей на конкретной информации c, такой как предупреждение, предупреждение и т. Д.

... создание плавающего и перетаскиваемого ...

У вас достаточно библиотек для Angularjs, которые работают с divs (position: absolute) просто погуглите:)

...