Good evening I am trying to call a modal with bootstrap 4 and jquery but I do not get it done as it says the documentation $ ('# myModal'). modal ('show') but it marks me an error link
Could you help me please I've been trying for a while and nothing
function editarProducto(id){
/*$('#formularioEditar')[0].reset();
$.ajax({
'method': 'POST',
'url': 'controller/cliente/modificarSeleccion.php',
'data': 'id='+id,
}).done(function(valores){
//console.log(valores);
// $('#mensajee').addClass("mostrar").html('Se Agrego Correctamente El Producto').show(200).delay(2500).hide(200);
var datos = eval(valores);
$('#id-prod').val(id);
$('#nombrePersona').val(datos[6]);
$('#edadPersona').val(datos[7]);
//$('#editarCantidad').val(datos[7]);
$('#personaReferencia').val(datos[8]);
$('#alias').val(datos[1]);
//$('#editarPrecio').val(datos[5]);
$('#edad').val(datos[2]);
$('#fechaInicial').val(datos[3]);
//$("#editarProducto").modal("show");
/*$('#myModal').modal({
show: true
});
});*/
$('#editarProducto').modal({
show:true,
backdrop:'static'
});
}<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<!-- Jquery ui -->
<link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui.min.css">
</head>
<body>
<header>"MVC PRUEBA"</header>
<section>
<div id="agregar-registros">
<table class="table table-bordered table-inverse">
<thead>
<tr>
<th>#</th>
<th>Nombre del dueño</th>
<th>edad</th>
<th>persona Referencia</th>
<th>Mascota Alias</th>
<th>edad Mascota</th>
<th>fecha de nacimiento</th>
<th>opciones</th>
</tr>
</thead>
<tbody>
<?php
include 'controller/cliente/traerRegistros.php';
?>
</tbody>
</table>
</div>
<div class="container-fluid">
<div class="row">
<div class="col">
<form id="formularioAgregar" class="formulario">
<table border="0" alling="center">
<h2>datos de cliente</h2>
<tr>
<td><label>Ingresa el nombre de la persona</label></td>
<td><input type="text" name="nombrePersona" id="nombrePersona"></td>
</tr>
<td><label>ingrese edad</label></td>
<td><input type="number" name="edadPersona" id="edadPersona"></td>
<tr>
<tr>
<td><label>persona de referencia</label></td>
<td><input type="text" name="personaReferencia" id="personaReferencia"></td>
</tr>
<tr>
<td><label>nombre del perro</label></td>
<td><input type="text" name="alias" id="alias"></td>
</tr>
<tr>
<td><label>edad del perro</label></td>
<td><input type="number" name="edad" id="edad"></td>
</tr>
<tr>
<td><label>fecha de nacimiento</label></td>
<td><input type="text" name="fechaInicial" id="fechaInicial"></td>
</tr>
<tr>
<td colspan="2"><div id="mensaje"></div></td>
</tr>
</table>
<button type="submit" name="agregar" id="agregar" class="btn btn-primary">Agregar Datos</button>
</form>
</div>
<a class="btn btn-primary" href="javascript:editarProducto('.$idPersona.');" >Editar</a>
<!-- Modal editar-->
<div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="formularioEditar" class="formulario">
<table border="0" alling="center">
<h2>datos de cliente</h2>
<tr>
<td><input type="text" required="required" readonly="readonly" id="id-prod" name="id-prod" readonly="readonly" style="visibility: hidden;" height: "5px;"></td>
</tr>
<tr>
<td><label>Ingresa el nombre de la persona</label></td>
<td><input type="text" name="nombrePersona" id="nombrePersona"></td>
</tr>
<td><label>ingrese edad</label></td>
<td><input type="number" name="edadPersona" id="edadPersona"></td>
<tr>
<tr>
<td><label>persona de referencia</label></td>
<td><input type="text" name="personaReferencia" id="personaReferencia"></td>
</tr>
<tr>
<td><label>nombre del perro</label></td>
<td><input type="text" name="alias" id="alias"></td>
</tr>
<tr>
<td><label>edad del perro</label></td>
<td><input type="number" name="edad" id="edad"></td>
</tr>
<tr>
<td><label>fecha de nacimiento</label></td>
<td><input type="text" name="fechaInicial" id="fechaInicial"></td>
</tr>
<tr>
<td colspan="2"><div id="mensaje"></div></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="actualizar" id="actualizar" class="btn btn-primary">Actualizar</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<!-- BOOTSTRAP MIN -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jquery para ui -->
<script src="js/jquery/jquery-3.2.1.js"></script>
<script src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<!-- codigo del calendario en assets -->
<script src="assets/calendario/calendario.js"></script>
<script src="js/index/index.js"></script>
</body>
</html>