在點擊模態外顯示確認彈出 - 引導

我在我的應用程序和ui-bootstrap中使用了AngularJS（1.5.9）。我想顯示一個確認彈出框，以防用戶在已打開的模式之外單擊。在點擊模態外顯示確認彈出 - 引導

我試圖使用$uibModalInstance.close()的受控退出和$uibModalInstance.dismiss()的非受控退出，但模式關閉後，一旦我顯示我的確認彈出已經太晚了。

試圖使用backdrop: 'static'屬性，但無法捕捉模態窗口外的單擊事件。

HTML：

<div ng-app="myApp"> 
    <script type="text/ng-template" id="myModal.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title">Modal title</h3> 
     </div> 
     <div class="modal-body"> 
      Modal content 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" ng-click="ok()">OK</button> 
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 

    <div ng-controller="MyCtrl"> 
     <input type="button" value="Show modal" ng-click="showModal()"/> 
    </div> 
</div>

JS：

angular.module("myApp", ['ui.bootstrap']) 
.controller("MyCtrl", function($scope, $modal) { 
    $scope.showModal = function(){ 
     $modal.open({ 
       templateUrl: 'myModal.html', 
       controller: 'ModalDialogController', 
     }) 
     .result.then(
      function() { 
       alert("OK"); 
      }, 
      function() { 
       alert("Cancel"); 
      } 
     ); 
    } 
}) 

.controller("ModalDialogController", function ($scope, $modalInstance) { 
    $scope.ok = function() { 
    $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('Cancel'); 
    }; 
});

這裏有一個相關的小提琴 - >Fiddle

正如你所看到的，一旦打開模態和點擊之外，還有一個提醒'取消'，但我想彈出另一個模式來確認這個動作來關閉模式，並在用戶點擊'取消'前面的模式保持打開狀態。如果用戶點擊「確定」關閉兩個模式。

任何想法？

來源

2016-12-27 Vali D

請嘗試以下演示：

曾使用「modal.closing」：模態關閉之前，此事件被廣播到模態範圍。如果偵聽器在事件上調用preventDefault（），則模態將保持打開。另外，如果事件被執行，$ close和$ dismiss方法返回true。該事件還包括結果/原因的參數以及指示模態是關閉（真）還是關閉的布爾值。

您可以用確認模式彈出窗口替換javascript確認。

angular.module('app', ['ui.bootstrap']) 
 

 
.controller('modalCtrl', function ($scope, $uibModalInstance) { 
 

 
    $scope.$on('modal.closing', function (event, reason, closed) { 
 
     if (!closed) { 
 

 
      if (!confirm('Are you sure you wanna close the modal? the database?')) { 
 
       event.preventDefault(); 
 
      } 
 
     } 
 
    }); 
 

 
    $scope.ok = function() { 
 
     $uibModalInstance.close(); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
     $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
}) 
 

 

 
.controller('appCtrl', function ($scope, $uibModal) { 
 

 
    $scope.open = function() { 
 
     var modalInstance = $uibModal.open({ 
 
      templateUrl: 'myModal.html', 
 
      controller: 'modalCtrl' 
 
     }).result.then(
 
       function() { 
 
        alert("OK"); 
 
       }, 
 
       function() { 
 
        alert("Cancel"); 
 
       } 
 
      ); 
 

 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.2/ui-bootstrap-tpls.min.js"></script> 
 
    
 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    </head> 
 

 
    <body ng-app="app" ng-controller="appCtrl"> 
 
    <button ng-click="open()">Click me!</button> 
 
    <script type="text/ng-template" id="myModal.html"> 
 
     <div class="modal-header"> 
 
      <h3 class="modal-title">Modal title</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
      Modal content 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button class="btn btn-primary" ng-click="ok()">OK</button> 
 
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
    </script> 
 
    </body> 
 

 
</html>

來源

2016-12-27 13:55:06

太棒了！謝謝！不知道我錯過了這個modal.closing功能。 –

歡迎:) –

Please use backdrop: 'static' after controller: 'ModalDialogController'. I am damn sure this code will be working 


angular.module("myApp", ['ui.bootstrap']) 
.controller("MyCtrl", function($scope, $modal) { 
    $scope.showModal = function(){ 
     $modal.open({ 
       templateUrl: 'myModal.html', 
       controller: 'ModalDialogController', 
       backdrop: 'static' 

     }) 
     .result.then(
      function() { 
       alert("OK"); 
      }, 
      function() { 
       alert("Cancel"); 
      } 
     ); 
    } 
}) 

.controller("ModalDialogController", function ($scope, $modalInstance) { 
    $scope.ok = function() { 
    $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
});

來源

2016-12-27 12:51:27

感謝您的評論。正如問題所述，這並不能解決我的問題。此解決方案將阻止模式的關閉，但我想彈出另一個彈出窗口，確認用戶想要關閉它。 –

我正在使用**背景：'靜態'**當我想在外部彈出框中單擊並彈出而不是隱藏。我是複製你的代碼，我使用背景。它正在工作正常 –

點擊外面我想看到另一個彈出窗口詢問「你確定要關閉嗎？」如果用戶點擊確定，關閉所有模式。背景：'static'在點擊模式外部沒有任何反應 –

angular.module("myApp", ['ui.bootstrap']) 
    .controller("MyCtrl", function($scope, $modal) { 
    $scope.showModal = function(){ 
     $modal.open({ 
       templateUrl: 'myModal.html', 
       controller: 'ModalDialogController', 
     }) 
     .result.then(
      function() { 
       alert("OK"); 
      }, 
      function() { 
       var con=confirm("Are you sure?"); 
       if(con) 
       alert("Confirm"); 
       else 
       alert("Cancelled"); 
      } 
     ); 
    } 
})

來源

2016-12-27 12:55:24

但是，如果在確認彈出框中點擊'取消'，主模式將關閉..它應該保持打開狀態。 –

在點擊模態外顯示確認彈出 - 引導

回答

相關問題