i have used the example of https://angular-ui.github.io/bootstrap/ for the modal and every thing works fine.
with this code, i can open the modal like in the example:
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '/resources/views/pages/tasks/edit.html',
size: size,
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
for the trigger / button i use this:
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
till here everything works fine. But now i want to open the model 'aside' (like from the right of my screen) i found this code:
<button class="btn white active"
data-toggle="modal"
data-target="#task_modal"
ui-toggle-class="modal-open-aside"
ui-target="body" >
</button>
combined whit this div it opens a modal from the right of the screen
<div class="modal fade inactive ng-scope " id="task_modal" data-backdrop="false" style="display: none;">
<div class="right white b-l col-md-8">
</div>
</div>
the only problem is, with the second example, i can't set every option; like keyboard: true and to close the model on backdrop click.
i searched a lot for a solution, but every site gives examples needing 'more' plugins. and i think the must be a way to fix this without plugins.
can someone help?
This 2 lines of css will solve your problem
.modal.fade:not(.in) .modal-dialog {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.