Tengo una aplicación basada en ASP.NET CORE MVC. Tengo un comportamiento extraño cuando trato de mostrar una ventana emergente modal con JQuery.
Tengo el siguiente div:
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" id="form-modal"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="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"> </div> </div> </div> </div>Tengo un botón para mostrar esta ventana emergente modal div. Cuando hago clic en el botón, Javascript agrega «in» a la clase para que se convierta en class="modal fade in", normalmente debería agregar «show». Como resultado, el modal no se muestra. Así que en el navegador ingresé al modo dev y eliminé "in" y agregué "show" y funcionó.
Pero me pregunto por qué mi JQuery agrega "in" en lugar de "show".
Aquí está mi JQuery:
jQueryModalGet = (url, title) => { try { $.ajax({ type: 'GET', url: url, contentType: false, processData: false, success: function (res) { $('#form-modal .modal-body').html(res.html); $('#form-modal .modal-title').html(title); $('#form-modal').modal('show'); console.log(res); }, error: function (err) { console.log(err) } }) return false; } catch (ex) { console.log(ex) } }Alguna idea ?
Finalmente, resolví el problema.
Por alguna extraña razón, incluí dos versiones diferentes de Bootstrap y JQuery al mismo tiempo, por lo que el conflicto estaba ocurriendo en el proceso de presentación modal.
Yo Tuve:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script> <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>Después de eliminar:
<script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>¡Y usando solo las librerías enlazadas locales lo resolví!
Ahora funciona como un encanto!