AngularJS. UI Bootstrap Modal schließt nicht beim Klick im Hintergrund, wenn benutzerdefinierte Stile verwendet werden

Ich verwende UI Bootstrap Modal mit benutzerdefinierten Stilen. Wenn Sie Standard-Bootstrap-Stile verwenden, klicken Sie auf das Backdrop-Element schließt das modale, aber wenn Sie benutzerdefinierte Stile verwenden, klicken Sie auf das Hintergrundelement tut nichts.AngularJS. UI Bootstrap Modal schließt nicht beim Klick im Hintergrund, wenn benutzerdefinierte Stile verwendet werden

Unten finden Sie Codebeispiele und den Link zu plunkr. Custom CSS und Bootstrap CSS sind im Kopf verlinkt, um sie zu überprüfen.

app.js

angular.module('testApp', ['ui.bootstrap']).controller('BodyCtrl', BodyCtrl); 

BodyCtrl.$inject = ['$uibModal']; 

function BodyCtrl($uibModal) { 
    var vm = this; 

    vm.openModal = openModal; 

    function openModal() { 
    var modal = $uibModal.open({ 
     templateUrl: 'modal.html', 
     controller: function() { 

     }, 
     controllerAs: 'modal' 
    }) 
    } 
}

index.html

<!DOCTYPE html> 
<html ng-app="testApp"> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <!-- <link rel="stylesheet" href="main.css"> --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap-tpls.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="BodyCtrl as body"> 
    <button type="button" ng-click="body.openModal()">Open modal</button> 
</body> 
</html>

modal.html

<h1>Modal</h1>

main.css

.modal-backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.2); 
} 
.modal { 
    position: absolute; 
    top: 80px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 320px; 
    height: 480px; 
    background: #ffffff; 
}

Quelle

2017-01-12 Svyatoslav

AngularJS wartet auf einen Klick auf das .modal-Element, nicht auf den .modal-Hintergrund. Mit folgenden Änderungen an main.css funktioniert es.

main.css

.modal-backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.2); 
} 

.modal { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: transparent; 
} 

.modal-dialog { 
    position: absolute; 
    top: 80px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 320px; 
    height: 480px; 
    background: #ffffff; 
}

Quelle

2017-01-13 11:03:27 Svyatoslav

AngularJS. UI Bootstrap Modal schließt nicht beim Klick im Hintergrund, wenn benutzerdefinierte Stile verwendet werden

Antwort

Verwandte Themen