Question

我已经建立了自己的确认信息，以便完全控制它。我的问题是如何在出现此消息时禁用后台（阻止用户与之交互）。 我不想使用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）出现时禁用后台的帮助，而不会禁用弹出窗口。

Answer 1

只有一个页面范围的div元素，其z-index高于背景但低于确认消息。将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;
}

Plunker示例：https://plnkr.co/edit/HLSYl0pI2AZ15qf5T5WM?p=preview

Answer 2

将您的确认信息放在您希望隐藏的容器之外，然后应用以下内容：

.modal-container.obscured {
    opacity: 0.4;
    filter: blur('1.5px'); /* for extra credits */
    pointer-events: none;
}

Answer 3

您可以将确认消息放在包装器中，该包装器覆盖整个页面。包装器的z-index应高于背景，并且低于确认框。

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

出现自定义确认消息时禁用后台

3 个答案: