Ocultar contenido cuando popup abierto

BleEDMaN · #1 (**permalink**) 09/04/2015, 12:04

Hola actualmente estoy usando magnific-popup para generar popups en mi web. La cosa es que cuando abro un popup quiero que el contenido de un nav no sea mostrado y cuando se cierre que vuelva a mostrarse. He leído la documentación del plugin en su web oficial y buscado información por internet pero no encuentro nada. He usado la API oficial del plugin y no funciona.

Contenido del NAV:

Código:

<nav class="top-nav">
  <ul>
   <li><a href="">A link</a></li>
   <li><a href="">A link</a></li>
  </ul>
</nav>

Botón que llama al popup:

Código:

<a href="#register-popup" class="open-popup-link">Call popup</a>

El popup oculto:

Código:

<div id="register-popup" class="white-popup mfp-hide">
  <div class="container">
    <p>some content</p>
  </div>
</div>

Este es el código actual que estoy usando para el Script:

Código:

<script type='text/javascript'>
    $('#register-popup').magnificPopup({
        callbacks: {
            open: function() {
                $('.top-nav').hide();
            },
            close: function() {
                $('.top-nav').show();
            }
        }
    });
</script>

Incluso en el callback open he probado por id (evidentemente poniéndole id al nav):

Código:

open: function() {
                document.getElementById('test').style.display = 'none';

Dejo la url de la documentación oficial:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#api

Muchas gracias de antemano :) Saludos!!

superweb360 · #2 (**permalink**) 09/04/2015, 16:35

¿Qué es lo que no te funciona, mostrar el popup o lo de ocultar/mostrar el NAV?

BleEDMaN · #3 (**permalink**) 09/04/2015, 20:50

Lo que no me funciona es el ocultar/mostrar el nav. El popup se muestra correctamente :) gracias.

superweb360 · #4 (**permalink**) 10/04/2015, 02:06

en la documentación del magnific popup pone "preloader: true" antes de los callbacks

Código Javascript:

Ver original$('.image-link').magnificPopup({
  // you may add other options here, e.g.:
  preloader: true,
 
  callbacks: {
    open: function() {
      // Will fire when this exact popup is opened
      // this - is Magnific Popup object
    },
    close: function() {
      // Will fire when popup is closed
    }
    // e.t.c.
  }
});

BleEDMaN · #5 (**permalink**) 10/04/2015, 06:14

Lo había probado con el preloader y no hay manera. Otra idea? Saludos!

superweb360 · #6 (**permalink**) 10/04/2015, 08:41

pon un alert() en los callbacks, para ver si se están ejecutando:

Código Javascript:

Ver original$('#register-popup').magnificPopup({
      preloader: true,
     
      callbacks: {
        open: function() {
              alert('open');
        },
        close: function() {
              alert('close');
        }
      }
    });

BleEDMaN · #7 (**permalink**) 10/04/2015, 10:41

No, no se está ejecutando o_O!! lo he probado antes del /head después el body y nada. La verdad es que no sé que pasa :S Help!!! gracias

superweb360 · #8 (**permalink**) 10/04/2015, 13:28

en la documentación dice que hay que poner esto en el $(document).ready:

Código Javascript:

Ver original$(document).ready(function() {
  $('#register-popup').magnificPopup({type:'image'});
});

¿Has puesto algo parecido?

BleEDMaN · #9 (**permalink**) 10/04/2015, 15:38

Sí lo he probado, lo tengo pero no es tipo imagen. Aún así tampoco funciona. Gracias por tus respuestas.

superweb360 · #10 (**permalink**) 10/04/2015, 16:25

Acabo de ejecutar el magnific popup en mi ordenador y los callbacks me funcionan perfectamente. Este es el código que he puesto:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="magnific-popup.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="jquery.magnific-popup.js"></script></head>
<script>
$(document).ready(function() {
    $('.test-popup-link').magnificPopup({ 
      type: 'image',
      items:{
      src: 'lion.jpg',
      },
      callbacks: {
       open: function() {
         alert('open');
       },
       close: function() {
         alert('close');
       }
      }
    });
});
</script>
<body>
<a class="test-popup-link" href="path-to-image.jpg">Open popup</a>
</body>
</html>