I. Introducción
A diferencia del resto de librerías, esta solo ofrece visualizar páginas web. Podremos visualizar imágenes, pero no directamente como tales sino estando insertadas en una página web.
Su uso es realmente sencillo. Basta con descargarse la librería que consta básicamente de:
-
Ficheros CSS: Para definir tus estilos.
-
Imágenes: Por defecto vienen la del botón cerrar y la de carga de la página.
-
Ficheros JS: Son dos ficheros javascript que deberás incluir en la página web.
Algunas consideraciones a tener en cuenta y que son motivos de numerosos fallos y quebraderos de cabeza:
-
No intentéis enlazar una página externa. Me explico, si ponéis en el enlace <a href=”http://www.google.com”…> te dirá que no encuentra la página. Solo sirve para enlazar páginas internas a tu servidor. Por ejemplo, poniendo: <a href=”secciones/cursos.html”…>.
-
Cuando ejecuteis el ejemplo, accedlo desde el servidor. Es decir, es necesario que se ejecute en un servidor. Por ejemplo, si tenéis un servidor local como apache, ejecutadlo desde allí. Si abriis la página directamente haciendo doble click en el fichero HTML, te dirá que no encuentra la página web. Esto no es un inconveniente puesto que realmente, vosotros ejecutaréis la página web en un servidor en concreto.
II. Uso de la librería
Una vez descargada la librería, bastará con crearnos un HTML en el directorio raiz. En la cabecera añadimos los dos ficheros javascript y el fichero CSS:
<script type=”text/javascript” src=”js/mootools.js” mce_src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/moodalbox.js” mce_src=”js/moodalbox.js”></script>
<link rel=”stylesheet” href=”css/moodalbox.css” mce_href=”css/moodalbox.css” type=”text/css” media=”screen” />
Hay que tener en cuenta en no equivocarnos en la ruta relativa del lugar donde están los ficheros que queremos referenciar.
A continuación, y para finalizar, creamos el enlace en el lugar que precisemos de la página web. Un posible ejemplo sería:
<a href=”secciones/contenido.html” rel=”moodalbox” title=”Este es el título que saldrá a la ventana.”>Enlace</a>
Unos comentarios al respecto:
-
No olvidaros de poner un enlace que exista. En caso de no existir no se abrirá ninguna ventana y podréis pensar (tal y como yo lo hice) que la librería no funciona.
-
En el campo rel, colocar la palabra moodalbox.
-
El campo title será el comentario que salga en la parte inferior de la foto.
-
Recordad que no podéis poner enlaces externos pues os dirá que no localiza la dirección web. Sólo enlaces internos.
-
Para que funcione, debéis ejecutarlo en el servidor. No sirve abrir directamente el HTML haciendo doble click en el fichero.
En la parte de referencias podéis bajaros un sencillo ejemplo y podéis acceder a la web principal.
III. Referencias
- Volver -
[...] MoodalBox Muy sencillo e implementa el efecto de ventana “abriendose” poco a poco. [...]
Hola a todos. Bueno el ejemplo funciona Ok. pero no se si es error o como se puede hacer porque tengo un problemita.
El caso es lo siguiente:…
Tengo mi primer pantallazo y en la cual hago consultas sbre mis facturas, los cargo desde mi Base de Datos. Y al mostrar los datos en tablas, quiero ponerle un Link a cada Factura para que me muestre el detalle. Y quiero que me muestre los detalles en un MoodalBox. pero No me funciona… Solo me abre la Pagina donde estoy mostrando los detalles de la factura… y no me muestra el modalbox…
Estaba intentando ver el codigo de mi HTML osea el primer pantallazo, pero vi que no aparece los datos de la consulta
Os agradezco su ayuda….
hola buen dia, fijate q yo estoy utilizando el moodalbox pero al ingresarlo en una pagina que contiene un animacion en flash no me la muestra, mi pregunta es tu sabes como le puedo hacer para que en el moodalbox me muestre mi anumacion en flash que estoy metiendo.
gracias