當出現自定義確認消息時禁用背景

我已經構建了自己的確認消息，以便完全控制它。我的問題是如何在出現此消息時禁用背景（阻止用戶與其交互）。 我不想使用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）時禁用背景而不禁用彈出窗口本身的幫助。

來源

2017-01-09 Unknown developer

通常它是由具有DIV這需要在屏幕的整個寬度和高度，定位在對話框後面，但在內容上，它註冊了一個點擊監聽器和調用'stopPropagation'在它的前面完成。 – ValLeNain

，我們必須用的z-index比背景高的全網頁div元素但低於您的確認信息。將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

來源

2017-01-09 13:04:21 Fissio

完美！非常感謝你 –

將您想要「晦澀」的容器外的確認信息，然後應用類似：

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

來源

2017-01-09 12:58:25 allnodcoms

我想禁用整個身體 –

@ILIAS - 您需要將您想要隱藏的內容放入另一個div。如果您禁用了身體標記，則頁面上的所有內容都將被禁用。 – allnodcoms

您可以將確認消息的包裝，它涵蓋了整個頁面內。包裝的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; 
}

來源

2017-01-09 13:04:32

你需要在這個事件上捕獲事件。它只會給出形式的外觀。 – allnodcoms

當出現自定義確認消息時禁用背景

回答

相關問題