I want to make $uibModal modal transparent when drugging and opaque when stop dragging.
For now, I tried jQuery fadeTo() and fadeIn() methods on the draggable stop event and the mouseup() method. The modal becomes transparent but doesn't become opaque.
How can I do this animation? The plunker
.directive('uibModalWindow', [function() {
return {
link: function(scope, element, attr) {
console.log('element', element);
var dialog = element.find('.modal-dialog');
dialog.draggable({
handle: '.modal-header',
drag: function() {
$(this).fadeTo(1000, 0.8);
},
stop: function() {
$(this).fadeTo(1000, 1);
//$(this).fadeIn();
}
});
$('.modal-header').mouseup(function() {
dialog.fadeTo(1000, 1);
//dialog.fadeIn();
});
}
};
}]);
You do not need to attach to the mouseup event, just reset the opacity to 100% when the dragging event is over.
May also be useful to specify that the modal window must be in the foreground of all the other elements of the page, to do this, simply set the property moveToTop to true.
See following please:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
keyboard: false,
backdrop: "static",
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
})
.directive('uibModalWindow', ['$document', function($document) {
return {
link: function(scope, element, attr) {
var dialog = element.find('.modal-dialog');
dialog.draggable({
handle: '.modal-header',
moveToTop: true,
drag: function() {
$(this).fadeTo(10, 0.5);
},
stop: function() {
$(this).fadeTo(10, 1);
}
});
}
};
}]);
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
<head>
<link data-require="jquery-ui@*" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="jquery-ui@*" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<style>
.modal-backdrop {
display: none;
}
</style>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Datepicker in modal</h3>
</div>
<div class="modal-body">
<p class="input-group">
<input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" datepicker-append-to-body="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="status.opened = true"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<h2>
<pre>
This text will be visible
when the modal is dragging.
Then will disappear when you stop to drag.
</pre>
</h2>
</div>
</body>
</html>I hope it helps you, bye.