Javascript 显示自定义确认消息时禁用后台_Javascript_Css_Angularjs

Javascript 显示自定义确认消息时禁用后台

javascript css angularjs

Javascript 显示自定义确认消息时禁用后台,javascript,css,angularjs,Javascript,Css,Angularjs,我已经建立了自己的确认信息，以便完全控制它。我的问题是如何在出现此消息时禁用后台（防止用户与其交互）我不想使用jQuery或UI引导模式 <body> <confirmation-message ng-if="showConfirmMessage">Changes have not been saved. Are you sure you wish to leave this page?</confirmation-message> <script&

我已经建立了自己的确认信息，以便完全控制它。我的问题是如何在出现此消息时禁用后台（防止用户与其交互）我不想使用jQuery或UI引导模式

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

不彻底检查代码；它确实有效。例如，

$rootScope.dirtyValueForm

的值来自另一个控制器当弹出窗口（.confirm message）出现时，我需要您的帮助来禁用背景，而不禁用弹出窗口本身。

将您的确认消息放置在您希望“隐藏”的容器之外，然后应用类似于：

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

只要有一个页面范围的div元素，其z索引高于背景，但低于确认消息。将div作为指令的一部分，并包含任何您想要分配给它的类

指令模板：

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

Plunker示例：

您可以将确认消息放在覆盖整个页面的包装中。包装器的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;
}

通常，它是通过一个div来完成的，div占据屏幕的全宽和全高，位于对话框的后面，但在内容的前面，它注册了一个click侦听器，并在其中调用

stopPropagation

。我想禁用整个body@ILIAS-您需要将要隐藏的内容放置在另一个div中。如果禁用body标记，则页面上的所有内容都将被类似地禁用。您需要捕获此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;
}

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