Usando Chrome 50 y JQuery 3.1.1, estoy tratando de hacer que funcione el modal básico de Foundation Reveal. Copié el código del ejemplo básico en el sitio de Zurb y lo coloqué en la etiqueta del cuerpo de mi página.
<a href="#" data-reveal-id="myModal" id="test">++</a> <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> <h2 id="modalTitle">Security Details</h2> <p>My message</p> <a class="close-reveal-modal" aria-label="Close">×</a> </div>Y he verificado que todas las bibliotecas se están cargando. La última pieza de guión en mi página es
<script> $(document).foundation(); </script>que sé que funciona porque estoy usando otros elementos de la Fundación que funcionan.
Cuando hago clic en el enlace "++" me sale un error en mi consola
TypeError no capturado: no se puede leer la propiedad 'defaultView' de nulo
si entonces corro
$('#myModal').foundation('reveal', 'open');
en la consola, aparece el cuadro de diálogo de revelación y, desde entonces, hasta que recargo la página, el enlace "++" también funciona. Entonces, supongo que en algún lugar de la configuración, el evento de clic en el enlace no funciona, pero el mensaje de error de JQuery no tiene sentido.
¿Algunas ideas? (También estoy usando la biblioteca JQuery Migrate)
Creo que su problema son los cambios importantes introducidos en jQuery 3 ( https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed ), específicamente la eliminación de .load , de lo que probablemente te des cuenta hasta cierto punto mientras usas la biblioteca de Migración, así que no voy a insistir al respecto.
Migrar no parece funcionar siempre para las versiones heredadas de Foundation (consulte el problema aquí: https://github.com/zurb/foundation-sites/issues/8975 ), pero por qué exactamente eso es un poco más vago con varias opiniones diferentes.
La buena noticia es que tienes dos opciones de reparación.
Arreglar la opción uno
La solución sugerida por Zurb es parchear manualmente todas las referencias rotas a .load . No puedo encontrar una lista para F5 pero aquí hay uno de F6 y supongo que son bastante similares (el pr >> https://github.com/zurb/foundation-sites/pull/8923/commits/c0b42643da96d3b297f3d7c35ccdcebed92ad7a1 ). No son tantos archivos, los afectados son:
Todos son el mismo problema; usando el depreciado .load(fn)
Si te sientes muy atrevido, podrías reemplazar globalmente todas las instancias de:
.load(function () {
con
.on("load", function () {
Arreglar la opción 2
Utilice la versión 1.4.1 de jQuery Migrate. No estoy del todo seguro de por qué 1.4.1 funciona cuando las versiones posteriores no lo hacen (o por qué se saltaron la versión 2 por completo), pero sí lo hace, por lo que probablemente sea un buen comienzo. (3.0.0 y 3.0.1-rc generan errores que parecen un poco contrarios a la intuición cuando se intenta que jQuery 3 funcione).
Trabajando con F 5.5.3, JQ 3.1.1 y JQM 1.4.1 >> https://jsfiddle.net/tymothytym/fxbk6h1d/
Una alternativa a la respuesta de tymothytym es hacer que sus enlaces llamen manualmente al método de revelación de la base. es decir
Reemplace su enlace modal desde:
<a data-reveal-id="myModal" data-reveal>
a
<a data-legacy-reveal-id="#myModal">
Luego agregue esto a su código js para captar el clic y abrir manualmente el modal:
$('a[data-legacy-reveal-id]').click(function(e){ e.preventDefault(e); $($(this).data('legacy-reveal-id')).foundation('reveal', 'open'); });