I am new to web programming, especially in front end, well, the fact is that I try to make a page. that shows the list of books, that has a button to add books, and that when you click on it, there is a modal that allows you to fill in the data, then save them and show them on the page.
when trying to click on "add book" button, the modal does not open, I get the following error:
"angular.js: 14800 Possibly unhandled rejection: backdrop click"
I do not understand why that error, here I leave the code so you can see it for yourself. thank you very much.
is the index.html
<!DOCTYPE>
<html charsfet>
<head>
<meta charset="UTF-8">
<title>Book Store</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
</head>
<body ng-app="app" ng-controller="myController">
<h1>Welcome to book store</h1>
<table >
<tr>
<th>Titulo</th>
<th>Autor</th>
<th>Editorial</th>
<th>Edicion</th>
</tr>
<tr ng-repeat="x in listaLibros">
<td>{{x.name}}</td>
<td>{{x.autor}}</td>
<td>{{x.editorial}}</td>
<td>{{x.edition}}</td>
</tr>
</table>
<div>
<button class="btn btn-success" ng-click="showModal()">Agregar Libros</button>
</div>
</body>
<script src= "app - copia.js" ></script>
</html>This is the app-copia.js file
var app = angular.module("app", ['ui.bootstrap']);
app.controller("myController", function($scope, $http, $modal){
$http.get("dataLibros.json")
.then(function(response){
$scope.listaLibros = response.data;
});
$scope.showModal= function(){
var modalInstance = $modal.open({
templateUrl: "agregarLibro.html",
backdrop: true,
windowClass: "modal",
});
}
});and this modal, addBook.html
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Agregar libro</h4>
<button type="button" class="close" ng-click="cancel()" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h6>Titulo</h6>
<input type="text" ng-model="listaLibros.name">
<h6>Autor</h6>
<input type="text" ng-model="listaLibros.autor">
<h6>Editorial</h6>
<input type="text" ng-model="listaLibros.editorial">
<h6>Edicion</h6>
<input type="text" ng-model="listaLibros.edition">
</div>
<button type="button" class="btn btn-success" ng-click="guardarLibro()">Agregar libro</button>
</div>