$ modalInstance對話框關閉，但屏幕保持灰色並且不可訪問

我正在使用angular-ui打開和關閉模式。當我用submit(object)或dismiss(message)關閉它時，對話框關閉，但屏幕保持灰色，我無法訪問我的應用程序。一些代碼：

父控制器（相關部分）：

$scope.deleteConfirm = function(toDelete) { 

console.log(toDelete); 

var modalObj = { 
    templateUrl: 'views/templates/delete.html', 
    controller: 'DeleteCtrl', 
    size: 'sm', 
    resolve: { 
    toDelete: function() { 
     return toDelete; 
    }, 
    collection: function() { 
     return $scope.users; 
    } 
    } 
} 

var modalInstance = $modal.open(modalObj); 

modalInstance.result.then(function (deletedItem) { 
    console.log(deletedItem); 
});

};

父HTML：

<button class="btn btn-danger btn-xs" ng-click="deleteConfirm(user)">X</button>

模態控制器：

.controller('DeleteCtrl', ['$scope', '$modalInstance', 'toDelete', 'collection', function ($scope, $modalInstance, toDelete, collection) { 

$scope.toDelete = toDelete; 

$scope.remove = function() { 
    collection.$remove(toDelete).then(function(ref) { 
     $modalInstance.close(ref); 
    }); 
}; 

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

}]);

模態模板：

<div class = "ll-modal"> 
<div class="modal-header"> 
<h3 class="modal-title">Confirm Delete</h3> 
</div> 
<div class="modal-body"> 
    Are you sure you want to delete this item? It will be gone forever. 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="remove()">Delete Permanently</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div>

來源

2015-06-04 compguy24

什麼版本的角和bootstrap？你還在用ngAnmate嗎？ – PSL

Angular 1.4，angular-bootstrap 0.12，我現在已經將ngAnimate轉換爲false，如您所建議的 – compguy24

Cool ...或者回退到1.3.x – PSL

看起來像使用1.4.x角度版ng-animate模式時出現問題。由於ng-animate在轉換完成後只是懶惰地刪除了DOM元素，因此在該流程中出現了一些問題。您可以通過關閉模態設置中的動畫來快速修復它。有一個問題logged in Github其中說，ui bootstrap尚未完全支持1.4.x版本。

var modalObj = { 
    templateUrl: 'views/templates/delete.html', 
    controller: 'DeleteCtrl', 
    size: 'sm', 
    animation: false, //<-- Turn off 
    resolve: { 
    toDelete: function() { 
     return toDelete; 
    }, 
    collection: function() { 
     return $scope.users; 
    } 
    } 
}

或者只是把它關掉全球：

app.config(function($modalProvider) { 
    $modalProvider.options.animation = false; 
});

更新

如果你根據上面提供的GitHub的鏈接可以看到，它已被固定在UI的最新版本引導程序，即upgrade of0.13.3或更高版本將解決此問題。

來源

2015-06-04 21:58:40 PSL

我正在使用角1.4.3 angualar-ui-bootstrap 0.13，並有問題。

PSL答案工作（刪除動畫）...但沒有動畫導致不良的用戶體驗（恕我直言）。

由於各種原因，將角恢復爲1.3不是一種選擇。

我試圖從0.13降級UI，引導到0.12.1 和它的工作對我來說

我知道用戶界面的自舉0.12.1只支持1.3角......但一切似乎對我的作品具有角1.4.3。由於我不廣泛使用ui-bootstrap，所以我猜這沒關係，但這可能不適用於所有人

來源

2015-07-16 14:15:31 Filip

您現在可以使用帶有Bootstrap UI 0.13.3的Angular 1.4.x，並且問題已解決。這裏是依賴關係：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>

來源

2015-08-12 21:08:31 aconkey

這是我的快速解決方案，在你的模態HTML只是粘貼;

<script> 
$(document).ready(function() { 
    $("button.close").click(function() { 
     $(".modal-backdrop.fade").hide(); 
    }); 
}); </script>

來源

2018-01-18 06:52:16

$ modalInstance對話框關閉，但屏幕保持灰色並且不可訪問

回答

相關問題