Actualmente estoy trabajando en un proyecto que utiliza Materialise CSS donde aparecerá un portal de inicio de sesión emergente superpuesto a la pantalla de inicio después de hacer clic en el botón de inicio de sesión ubicado en la barra de navegación.

El problema es que el modal no aparece cuando intento hacer clic en el botón de inicio de sesión. Otros sugieren incluir el código JavaScript para el modal Materialise que hice pero aún no funciona. Esperaba preguntar si el problema radica en cómo las etiquetas <div> están encerradas dentro de las etiquetas <ul> o he pasado por alto algo.

A continuación se muestra el código que utilicé y el diseño de la aplicación:

nav.hbs

 <nav> <div class="nav-wrapper"> <a href="#" class="brand-logo"> <img src="/imgs/logo-white.png" width="200px" height="50px"> </a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li> <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Login</a> </li> <!-- Modal Structure --> <div id="modal1" class="modal"> <div class="modal-content"> <h4>Modal Header</h4> <p>A bunch of text</p> </div> <div class="modal-footer"> <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a> </div> </div> </ul> </div> </nav> <script type="text/javascript"> $(document).ready(function () { $('#modal1').modal(); }); </script>