¿Cómo trabajar con diálogos en css3

categoría Los medios de comunicación de Internet y sociales / Diseño y desarrollo web / Páginas web de construcción

Tanto HTML5 y javascript permiten mostrar los cuadros de diálogo en CSS3. Por ejemplo, se puede ver una combinación de un cuadro de diálogo HTML5 / CSS3 que no requiere el uso de javascript en el proyecto de código.

Adición de javascript significa que tiene acceso instantáneo a la alerta (), confirmar (), y rápidos) funciones (por pantalla el cuadro de diálogo directo limitado. Usted también tiene toda la funcionalidad que javascript puede proporcionar para crear realmente sorprendentes cuadros de diálogo personalizado.

El problema con todos estos enfoques es que puede que tenga que escribir una cantidad considerable de código para obtener el resultado deseado. Por otro lado, el uso de jQuery UI hace posible la creación de este tipo de cuadro de diálogo sin mucha codificación en absoluto:

  • Básico

  • Animados

  • Modal

  • Modal con la confirmación

  • Forma modal

  • Mensaje modal

Además, incluso un cuadro de diálogo jQuery UI básica proporciona una mejor funcionalidad que la función de alerta () de javascript. Puede mover el cuadro de diálogo alrededor, cambiar su tamaño, y cerrarla mediante el uso de la X en la esquina superior derecha. El texto también se puede adornar de diversas maneras, ya que utiliza la entrada estándar HTML.

El siguiente ejemplo se inicia mediante la creación de un estilo interno de usar para decorar el texto. (Usted puede encontrar el código completo para este ejemplo en el Capítulo carpeta 06 Widgets del código descargable como DialogBox.HTML.)

Este código proporciona unos simples cambios en el texto - sólo lo suficiente para que pueda ver el CSS personalizado en el trabajo. El siguiente código crea el cuadro de diálogo en la pantalla de forma automática cuando se carga la página.
Creación de un cuadro de diálogo simple
El cuadro de diálogo requiere dos elementos - un contenedor, como un 
, para mantener el subtítulo en el atributo de título y un elemento textual, tal como una
, para mantener el contenido. Observe que el texto del párrafo incluye una  en este caso para dar énfasis a la palabra interesante. Puede formatear el contenido de cualquier manera deseada sin necesidad de modificar la llamada a jQuery UI en absoluto.
El script usa un selector de Identificación para acceder a la 
. A continuación, realiza una simple llamada al diálogo () para mostrar el cuadro de diálogo en pantalla. Observe que proporciona una apariencia agradable y contiene contenido formateado, a diferencia de la función de alerta (), que proporciona un cuadro de diálogo austera, plaza que carece de cualquier formato.
imagen0.jpg

   
	 	 
 
 
 
 
 
Artículos Relacionados
 
  

 
 
Sobre el autor
 
  Archivos de código para HTML5 y CSS3 Archivos de código para HTML5 y CSS3  
HTML y CSS son los bloques básicos de construcción de sitios web. La llegada de HTML5 y CSS3 representa una etapa evolutiva dinámica y poderosa en el desarrollo de diseño web. Maximizar el potencial de HTML5 y CSS3 permite aplicar un estilo y…
  Cómo crear un nuevo archivo javascript en editar komodo Cómo crear un nuevo archivo javascript en editar komodo  
Con un editor de diseño personalizado para escribir código javascript, como Komodo Edit, le ahorrará mucho tiempo y esfuerzo. Estos entornos de desarrollo integrado (IDE) proporcionan un editor de texto con características especiales que…
  Cómo crear ventanas emergentes en javascript Cómo crear ventanas emergentes en javascript  
javascript proporciona acceso a tres tipos de cuadros de diálogo: alerta (), confirmar (), y prompt (). Usted puede hacer varias cosas con los pop-ups. Por ejemplo, puede hacer que la información aparece en varias líneas en estos cuadros de…
  Cómo hacer listas de enlaces para HTML5 y programación css3 Cómo hacer listas de enlaces para HTML5 y programación css3  
Muchas páginas web resultan ser listas de enlaces en la programación HTML5 y CSS3. Porque las listas y enlaces van tan bien juntos, es bueno mirar un ejemplo. Observe esta lista de enlaces a libros escritos por un determinado autor.Este ejemplo no…
  Cómo usar ajax y jQuery para su inclusión en el cliente de su sitio HTML5 y CSS3 Cómo usar ajax y jQuery para su inclusión en el cliente de su sitio HTML5 y CSS3  
AJAX le puede dar los mismos efectos para su HTML5 y CSS3 que incluye el lado del servidor (SSI) hace. La página se verá exactamente lo mismo, pero un método completamente diferente se utiliza para lograr su objetivo.csAJAX.html
  Comandos de E / S básicas en javascript Comandos de E / S básicas en javascript  
Programadores de javascript suelen utilizar los comandos que se muestran en la siguiente tabla para controlar la entrada y salida basada en diálogos en programas para ser utilizados en la Web.Elemento Descripción("mensaje") de alerta -Crea un…
  Cómo crear una página para móviles dispuestos en Dreamweaver Cómo crear una página para móviles dispuestos en Dreamweaver  
Páginas jQuery Mobile Starter de Dreamweaver son una buena manera de generar rápidamente un sitio móvil fácil. La página móvil de arranque crea una página HTML5 con cinco ficha páginas prediseñadas jQuery Mobile, o secciones de la página…
  Cómo incorporar el jQuery ready () función Cómo incorporar el jQuery ready () función  
Un problema común en la programación de javascript es que el programa de javascript se ejecutará antes de que se cargue la página. Se puede acceder a los elementos HTML en una página. Esto significa que también puede acceder a cosas…
  NaturallySpeaking cuadros de diálogo y comandos de teclas de acceso rápido NaturallySpeaking cuadros de diálogo y comandos de teclas de acceso rápido  
Después de empezar a dictar con NaturallySpeaking, es sólo cuestión de tiempo antes de que usted se encuentra conversando con un cuadro de diálogo. De hecho, es posible que haya estado hablando con NaturallySpeaking cuadros de diálogo, incluso…
  Cambie la configuración del teclado en su PC Cambie la configuración del teclado en su PC  
Su teclado es el dispositivo de entrada principal para su PC. Saber cómo controlar el teclado o cambiar la configuración del teclado es fundamental para el funcionamiento de su equipo.Tras mantener pulsado una tecla durante un tiempo determinado,…
  ¿Cómo crear una interfaz que pueden arrastrarse en css3 ¿Cómo crear una interfaz que pueden arrastrarse en css3  
A veces, un usuario tiene que cambiar la posición de elementos de la pantalla para que sean más fáciles de ver o trabajar. En CSS3, creando un ambiente en el cual el usuario puede mover elementos en torno no tiene por qué implicar a escribir…
  Cómo crear un nuevo archivo html5 css3 que utiliza en la edición de Komodo Cómo crear un nuevo archivo html5 css3 que utiliza en la edición de Komodo  
Con un editor de diseño personalizado para la creación de proyectos que dependen de HTML5 y CSS3 le ahorra un montón de tiempo y esfuerzo. Estos entornos de desarrollo integrado (IDE) proporcionan un editor de texto con características…
 
 »  »  »  » ¿Cómo trabajar con diálogos en css3