“Conocimientos software>Código abierto

Cómo agregar un texto Lightbox afines en iWeb

2016/3/22
Lightbox es un script que puede utilizar para superponer imágenes en sus páginas web. También puede superponer texto si usted utiliza una versión modificada del script. Si no desea utilizar una secuencia de comandos en su sitio iWeb , pero usted todavía desea visualizar luz -como texto , puede utilizar hojas de estilo . El método CSS no es tan personalizable como el Lightbox guión actual, sino que le permitirá visualizar la mesa de luz -como texto y las imágenes correctamente. Cosas que necesitará
Todas las imágenes en una carpeta
Mostrar más instrucciones
1

iWeb abierto y crear una nueva página , como " introduction.html " .
página 2

optar por publicar el sitio web en el disco duro y seleccione una carpeta .
3

Crear un nuevo documento de texto dentro de la carpeta en la que guardó el sitio y nombre de " lightbox.css " .
4

Abra el documento " lightbox.css " en un editor de texto como el Bloc de notas o WordPad.
5

Copia y pega el código siguiente en el documento , a continuación, guarde y cierre el archivo :

black_overlay {display : none ; posición : . absoluta ; top: 0 %, restante: 0 %, width: 100 % ; height: 100 % ; background-color : negro , z -index: 1001; - moz- opacidad : 0,8 ; opacidad : 0,80 ; filtro: . alfa ( opacidad = 80 ) ;}

white_content {display : none ; position: absolute , superior : 25 %, restante: 25 % , ancho : 50 % ; altura : 50 % ; padding : 16px ; frontera : sólido naranja 16px ; background-color : blanco; z -index: 1002 ; overflow : auto; }
página 6

Abra la página " introduction.html " en la carpeta donde lo ha creado usando el editor de texto .
7

Inserte esta línea en cualquier lugar entre la " " y" < /head> "etiquetas para cargar el archivo CSS :


8

Copia y pega el siguiente código entre el " " y " " etiquetas para insertar caja de luz - como el texto :

Si desea mostrar una caja de luz , haga clic en < /p>

id="light" class="white_content"> Este es el texto -como la caja de luz . Cualquier cosa puede pasar aquí, incluyendo imágenes. < /div >
9

Reemplazar " This Link " en el código del paso 8 con el elemento que se desea que el usuario pulse para mostrar la caja de luz .
10

Reemplazar " Este es el texto -como la luz . Cualquier cosa puede pasar aquí, incluyendo las imágenes ", con su caja de luz -como texto. Usted puede incluso incluir imágenes. Cuando el usuario hace clic en "Cerrar " cierra la caja de luz .
11

Guarde y cierre el archivo " introduction.html " .

Código abierto
Diferencias entre la CSS y CSS3
Cómo abrir un archivo Gz
Cómo configurar Contacto Scripts formulario
Cómo reiniciar Apache con el comando
Cómo convertir SWF a FLV Open Source
Linux Computer Forensic Tools
Cómo configurar GNU
Servidor redirige al panel de WordPress en Login
Conocimientos Informáticos © http://www.ordenador.online