Estoy tratando de mostrar un modal llamando a una función de archivo JS.
<div onclick="UsernameModal.showModal()" style="font-family: 'irsans-medium'; margin-right: 10px;color: #343CF9">some text</div>El archivo JS y la función tienen el siguiente aspecto.
var UsernameModal = UsernameModal || {}; $(document).ready(function () { UsernameModal.showModal = function () { console.log("hi"); $('#usernameModal').modal({ backdrop: 'static', keyboard: false }); $('#usernameModal').modal('show'); } . . . }Se invoca el método de registro en la función y también JQuery está funcionando a medida que ingresa en el signo $. Y no se muestran errores en la consola después de la ejecución.
Mi archivo _Layout.cshtml es el siguiente.
. . . <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/js/bootstrap.js"></script> <script src="~/js/common.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"> </script> <script src="~/js/login.js"></script> </head> <body> @RenderBody() @RenderSection("scripts", required: false) </body> </html>No sé por qué no se ejecuta la función de presentación modal. Y el modal se encuentra a continuación.
<div class="modal fade" id="usernameModal" tabindex="-1" role="dialog" aria-labelledby="usernameModal" aria-hidden="true"> <div class="modal-dialog center-modal"> <div class="modal-content"> <div class="modal-body"> @await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel()) </div> </div> </div> </div>Primero, aria-labelledby="usernameModal" debía ser aria-labelledby="usernameModalLabel" .
En segundo lugar, en lugar de llamar dos veces a modal , una vez con el argumento show y luego otra vez con algunas opciones configuradas, puede ponerlas todas juntas.
$('#usernameModal').modal({ backdrop: 'static', keyboard: false, show: true });En tercer lugar, el orden del css y el script cargados son importantes. El css de arranque debe ir primero, luego la biblioteca jQuery, luego la biblioteca popper (si corresponde), finalmente la biblioteca de arranque.
En cuarto lugar, debe asegurarse de que todos los DOM se hayan cargado antes de intentar usarlos. Puede usar jquery's ready , como:
$(function() { // Code that will be run after all DOMs in the page are loaded });A continuación se muestra un ejemplo de trabajo:
$(function() { $('#btnShowModal').bind('click', () => { console.log("show modal"); $('#usernameModal').modal({ backdrop: 'static', keyboard: false, show: true }); }); }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script> <button id="btnShowModal">Show Modal</button> <div class="modal fade" id="usernameModal" tabindex="-1" aria-labelledby="usernameModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> @await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel()) </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>Espero que esto te haya ayudado.
Corregí el orden en el que las referencias del archivo se encontraban en mi clase _Layout.cshtml.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> <title>something</title> <link href="~/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/css/bootstrap-theme.min.css" rel="stylesheet" /> <link rel="icon" type="image/x-icon" href="~/favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" /> <link rel="stylesheet" type="text/css" href="~/css/site.css" /> <link rel="stylesheet" href="~/css/login.css"/> <link rel="stylesheet" href="~/css/common.css" /> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/js/bootstrap.min.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> <script src="~/js/common.js"></script> <script src="~/js/login.js"></script> </head> <body> @RenderBody() @RenderSection("scripts", required: false) </body> </html>