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
Hola.
¿Hay manera de lanzarlo desde un botón en flash?.
Gracias
Hola, mi problema es que tengo un objeto swf en la pagina, con IE desaparece el Flash cuando se ejecuta moodalbox y con safari el flash se queda por delante del efecto moodalbox. En Firefox perfecto. Alguna idea????.
que tal… para poder ejecutarlo desde un boton en flash.
deben agregar en el html que va a contener el flash una funcion que ejecute el siguiente codigo:
MOOdalBox.open(«pagina.html»,»titulo_inferior»,»ancho alto»)
ejemplo:
en el html qeu contiene el flash.
function modalbox(){
MOOdalBox.open(«pagina.html»,»titulo»,»800 400″)
}
y del flash llamamos a la funcion java de esta manera:
getUrl («javascript:modalbox()»);
Hola, muchas gracias. Alguien sabe lo que hay que hacer para que funcione en IE8, Chrome y Opera
Mil gracias de antemano!!
hola…
yo estaba en la misma situacion, pero encontre otro componente llamado modalbox..
http://jorgeluis.no-ip.biz/descargas_20/modalbox.rar
descarga este ejemplo que funciona con todos los navegadores, lo probe con IE8, Chrome, opera, safari, etc..
la unica observacion para que tengas muy encuenta cuando trabajas con medalbox y otros parecidos… es que si levantas paginas que estan dentro de carpetas, las imagenes de esa pagina, deben indicar el recorrido completo, ejemplo:
tu medalbox esta en el root, y quieres mostrar una pagina que se encuentra en root/carpeta/pagina.html…
entonces las imagenes, hojas de style (etc), que contiene pagina.html, deben indicar el recorrido, ejemplo: carpeta/img/imagen1.jpg… (o abre img/pagina.html y ve como muestra las imagenes)
acuerdate de este comentario cuando muestres una pagina en MODALBOX, y no levante las imagenes o Stylos..
saludos y suerte..
Hola, he intentado por todos los medios, modificando rutas a los archivos, etc etc etc, y el link me sigue abriendo la página referenciada en vez de desplegar el Moodal con la página dentro.
¿Tiene que ver el hecho de que la página principal (donde están los llamados a los archivos del Moodalbox) ya tiene otros llamados del tipo
?
Gracias por cualquier ayuda, realmente necesito esto funcionando
Sebastian
no me lo mostró en el post, pero la llamada a la que me refiero es la de la hoja de estilos:
link href=»./styles/style.css» rel=»stylesheet» type=»text/css»
Sin comentarios, no hagan caso a lo anterior. Al descomprimir quedó todo dentro de la carpeta «modalbox» y no la incluñi en la ruta… ahora está todo funcionando y me siento un noob por haber posteado lo anterior XD
En fin, todo trabaja perfecto, muchísimas gracias por este post y el aporte!
jorge, muchisimas gracias por tu respuesta.
dejo algunas aclaraciones para aquellos que, como yo, neceseitan un par de aclaraciones extras:
agregar en el HTML que contiene el SWF, entre las etiquetas HEAD:
function modalbox(){
MOOdalBox.open(«pagina.htm»,»titulo»,»800 400″)
}
y al botón flash, la siguiente acción:
on (release) {
getUrl (‘javascript:modalbox()’);
}
Y POR SUPUESTO EN LA MISMA CARPETA DEL HTML TODOS LOS ARCHIVOS Y CARPETAS DE MoodalBox.
tengo un pequeño problema, estoy usando el moodalbox para que al pinchar en un boton me aparezca un pequeño formulario html.
hacerlo lo hace correctamente, pero al iniciar la funcion y abrirme la nueva pantalla, la pantalla que se queda por debajo se descoloca completamente es como si el javascript me modificara el css principal. alguien puede ayudarme.
gracias
^Como hago para llamarlo desde un boton en html porfavor, estoy trabajando con formularios JSP
como hago para que la ventana modal se me ejecute al cargar la pagina
Utilizas en javascrip la funcion
setTimeout(‘Modalbox()’,1000);
Esto hace que, cuando se carga la pagina, llame a la funcion modalbox en tiempo 1. Segundo despues… Saludos… jorge
Como hago para modificar el tamaño de la ventana del modal, he tratado con los ejemplos que aparecen al inicio de los comentarios pero no me funciona
MOOdalBox.open(“pagina.htm”,”titulo”,”800 400″)
Donde pones rel=”moodalbox” , ahí es donde asignas los atributos de tamaño. Ejm: rel=’moodalbox;width=1000;height=500′
ME FUNCIONA CON UNAS PAGINAS PHP; PERO ESTOY USANDO UNOS SELECT ANIDADOS CON EVENTOS JAVASCRIPT Y NO ME FUNCIONAN; ALGUNA SOLUCION A LOS EVENTOS???
hola he utilizado el modalbox, para llamar un formulario externo html el cual me captura una ide por la url y en los campos me muestra el contenido de la tabla osea un formularioa de edicion, cuando cambio el dato y doy grabar no se como regresar a la ventana anterior, me pueden ayudar con eso por favor
Para modificar el tamaño. Donde pones rel=”moodalbox” , ahí es donde asignas los atributos de tamaño. Ejm: rel=’moodalbox;width=1000;height=500′