Я создал собственное подтверждающее сообщение, чтобы иметь полный контроль над ним. Моя проблема заключается в том, как отключить фон (предотвратить взаимодействие с пользователем), когда появляется это сообщение. Я не хочу использовать модалы jQuery или UI Bootstrap .

<body>
<confirmation-message ng-if="showConfirmMessage">Changes have not been saved. Are you sure you wish to leave this page?</confirmation-message>


<script>
    angular.module('myApp',[])
.run(['$rootScope', '$state', '$location', function($rootScope, $state, $location) {
        'use strict';
$rootScope.showConfirmMessage=false;
        var towardsState,towardsParams;

        $rootScope.$watch('changeState', function(newVal) {       
            if (newVal){   
                $state.go(towardsState, towardsParams);  
            }       
        });

        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {

            towardsState=toState;
            towardsParams=toParams;

            if ($rootScope.dirtyValueForm) {
                event.preventDefault();
                $rootScope.showConfirmMessage=true;

                $rootScope.dirtyValueForm=false;
                $rootScope.changeState=false;      
            }

        });

    }])


.directive('confirmationMessage',  function($rootScope) {
            return {
               transclude:true,

               templateUrl:'app/shared/directives/confirmationMessage.html',
               link:function(scope,element){
                  element.on('click', function(event) { 
                        event.preventDefault();
                        if ($(event.target).text()==='Okay') {
                           $rootScope.showConfirmMessage=false;
                            ....
                        }
                        else if ($(event.target).text()==='Cancel') {
                           $rootScope.showConfirmMessage=false;
                            ...
                        }
                  });
               }
            };
        });
     </script>
    </body>

< Сильный > confirmationMessage.html

<div class="confirm-message" >
    <ng-transclude></ng-transclude>
    <br/>
    <br/>
    <button>Okay</button>
    <button>Cancel</button>
</div>

и CSS

.confirm-message {
  position: fixed;
  top:220px;
  left:50%;
  z-index:1000;
  width: 400px;
  height:150px;
  padding:15px;
  margin-left: -200px;
  text-align: center;
  border: 1px solid #000;
  background: #293C6E;
  color:white;
}

Не проверяйте тщательно код; это работает. Например, значение $rootScope.dirtyValueForm исходит от другого контроллера. Мне нужна ваша помощь в отключении фона, когда всплывающее окно (.confirm-message) появляется без отключения самого всплывающего окна.

0
Unknown developer 9 Янв 2017 в 15:51

3 ответа

Лучший ответ

Просто используйте элемент div на всю страницу с z-индексом выше, чем фон, но ниже, чем ваше подтверждающее сообщение. Имейте div как часть вашей директивы с любым классом, который вы хотите назначить ему тоже.

Директивный шаблон:

<div class="backdrop"></div>
<div class="confirm-message" >
    <ng-transclude></ng-transclude>
    <br/>
    <br/>
    <button>Okay</button>
    <button>Cancel</button>
</div>

Стиль:

.backdrop {
  z-index:500;
  background-color:rgba(0, 0, 0, 0.3);
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

Пример плунжера: https://plnkr.co/edit/HLSYl0pI2AZ15qf5T5WM/p>view

1
Fissio 9 Янв 2017 в 13:04

Поместите свое подтверждающее сообщение за пределы контейнера, который вы хотите «скрыть», затем примените что-то вроде:

.modal-container.obscured {
    opacity: 0.4;
    filter: blur('1.5px'); /* for extra credits */
    pointer-events: none;
}
0
allnodcoms 9 Янв 2017 в 12:58

Вы можете поместить свое подтверждающее сообщение в оболочку, которая охватывает всю страницу. Оболочка должна иметь z-индекс выше фона и ниже поля подтверждения.

.confirm-message-wrapper
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);

    z-index: 900;
}
0
Tim Grant 9 Янв 2017 в 13:04