Comment travailler avec de dialogue dans CSS3

category Internet & médias sociaux / Web design & développement / Pages web construction

Les deux HTML5 et javascript permettent d'afficher des boîtes de dialogue dans CSS3. Par exemple, vous pouvez voir une combinaison d'une boîte de dialogue HTML5 / CSS3 qui ne nécessite pas l'utilisation de javascript au Code Project.

Ajout javascript signifie que vous avez un accès instantané à l'alerte (), confirm (), et rapides) fonctions (pour l'affichage limitée de boîte de dialogue direct. Vous avez également toutes les fonctionnalités que javascript peut fournir pour créer vraiment étonnantes boîtes de dialogue personnalisées.

Le problème avec toutes ces approches est que vous pouvez avoir besoin d'écrire une quantité considérable de code pour obtenir le résultat souhaité. D'autre part, en utilisant jQuery UI permet de créer ces types de boîte de dialogue sans beaucoup codage du tout:

  • Élémentaire

  • Animated

  • Modal




  • Modal confirmation

  • Formulaire modal

  • Un message Modal

En outre, même une boîte de dialogue jQuery UI de base prévoit une meilleure fonctionnalité que la fonction d'alerte () de javascript. Vous pouvez déplacer la boîte de dialogue autour, redimensionner, et fermez-le en utilisant le X dans le coin supérieur droit. Le texte peut également être décoré de diverses manières, car il utilise l'entrée standard HTML.

L'exemple suivant commence par la création d'un style interne à utiliser pour décorer le texte. (Vous pouvez trouver le code complet pour cet exemple dans le répertoire Chapitre 06 Widgets dossier de la Code téléchargeable comme DialogBox.HTML).

Ce code prévoit quelques changements simples au texte - juste assez pour que vous puissiez voir le CSS personnalisé au travail. Le code suivant crée la boîte de dialogue sur l'écran automatiquement lorsque vous chargez la page.
Création d'une boîte de dialogue simple
La boîte de dialogue requiert deux éléments - un récipient, tel qu'un 
, de tenir la légende dans l'attribut title et un élément textuel, comme un
, pour maintenir le contenu. Notez que le texte de l'alinéa comprend une  dans ce cas, de prévoir l'accent sur le mot intéressant. Vous pouvez formater le contenu de manière quelconque sans modifier l'appel à jQuery UI du tout.
Le script utilise un sélecteur d'ID pour accéder à la 
. Il fait ensuite un simple appel au dialogue () pour afficher la boîte de dialogue à l'écran. Notez qu'il offre un aspect agréable et il contient contenu formaté, contrairement à la fonction alert (), qui fournit une boîte de dialogue austère, carré qui manque de tout formatage.
image0.jpg
 
 
 
 
 
 
 
 
Articles Similaires
 
  

 
 
A propos Auteur
 
  Fichiers de code pour HTML5 et CSS3 Fichiers de code pour HTML5 et CSS3 
HTML et CSS sont les blocs de construction de base de sites Web. L'avènement de HTML5 et CSS3 représente une étape de l'évolution dynamique et puissant dans le développement de la conception web. Maximiser le potentiel de HTML5 et CSS3 permet…
  Comment faire pour créer des pop-ups en javascript Comment faire pour créer des pop-ups en javascript 
javascript permet d'accéder à trois types de boîtes de dialogue: alert (), confirm (), et prompt (). Vous pouvez faire plusieurs choses avec les pop-ups. Par exemple, vous pouvez faire apparaître des informations sur plusieurs lignes dans…
  Comment utiliser Ajax et jQuery pour l'inclusion côté client de votre site de HTML5 et CSS3 Comment utiliser Ajax et jQuery pour l'inclusion côté client de votre site de HTML5 et CSS3 
AJAX peut vous donner les mêmes effets pour votre HTML5 et CSS3 que les Server Side Includes (SSI) fait. La page sera exactement le même, mais une méthode entièrement différente sera utilisée pour atteindre votre objectif.csAJAX.html
  Les commandes de base d'E / S en javascript Les commandes de base d'E / S en javascript 
Programmeurs javascript utilisent couramment les commandes indiquées dans le tableau suivant pour l'entrée et la sortie en fonction de dialogue de contrôle dans les programmes pour être utilisé sur le Web.Élément Descriptionalert…
  Code à utiliser dans les fonctions de manipulation variable javascript Code à utiliser dans les fonctions de manipulation variable javascript 
Comme le montre le tableau suivant, vous pouvez utiliser ces déclarations javascript dans votre propre code pour créer et modifier des variables dans vos fonctions javascript.Élément Descriptionvar myVar = 0-Crée une variable dont la…
  Comment ajouter jquery à une page Comment ajouter jquery à une page 
Une fois que vous avez téléchargé ou jQuery savoir où trouver la version de CDN-hébergé, vous devez le référencer dans votre page. jQuery est comme tout fichier javascript externe.Ajouter jQuery locale à une pageTélécharger jQuery et…
  Comment combiner géolocalisation avec google maps lors du codage avec javascript Comment combiner géolocalisation avec google maps lors du codage avec javascript 
Une des choses les plus communes que les programmeurs javascript doivent faire avec les données de géolocalisation est d'afficher un emplacement sur une carte. Pour ce faire, vous devez d'abord obtenir la latitude et la longitude. Vous avez…
  Comment créer une page mobile prêt dans Dreamweaver Comment créer une page mobile prêt dans Dreamweaver 
Les pages jQuery Mobile Starter de Dreamweaver sont un bon moyen de générer rapidement un site mobile-friendly. La page de démarrage mobile crée une page HTML5 avec cinq jQuery Mobile Data-pages prédéfinies, ou des sections de la page HTML qui…
  Comment intégrer l'jquery prêt () fonction Comment intégrer l'jquery prêt () fonction 
Un problème commun lors de la programmation javascript est que le programme javascript sera exécuté avant la page est chargée. Vous pouvez accéder aux éléments de HTML sur une page. Cela signifie que vous pouvez également accéder…
  Comment effectuer la validation javascript base Comment effectuer la validation javascript base 
Vous pouvez le faire som validation de base en utilisant javascript pour une variété de types d'entrée. Ce premier exercice met en place le code HTML pour le formulaire Web. Une fois que vous avez terminé cet exercice, vous aurez la…
  Comment créer une interface déplaçable en CSS3 Comment créer une interface déplaçable en CSS3 
Parfois, un utilisateur a besoin de repositionner les éléments à l'écran pour les rendre plus faciles à voir ou à travailler avec. En CSS3, la création d'un environnement dans lequel l'utilisateur peut déplacer des éléments ne doit pas…
  Comment créer une interface sortable en CSS3 Comment créer une interface sortable en CSS3 
Certains types de tri sont faciles pour les ordinateurs à faire, et vous voulez que votre codage de CSS3 pour créer cette situation. Par exemple, un ordinateur peut mettre des élements dans l'ordre alphabétique beaucoup plus rapidement qu'un…
  Comment détecter le type de navigateur de l'utilisateur dans CSS3 Comment détecter le type de navigateur de l'utilisateur dans CSS3 
Dans la plupart des cas, les développeurs ne reçoivent pas de choisir le navigateur d'un utilisateur. Pour déterminer si un utilisateur particulier peut travailler avec votre application de CSS3, alors, vous devez d'abord détecter le navigateur…
  Comment sélectionner des éléments avec jQuery en CSS3 Comment sélectionner des éléments avec jQuery en CSS3 
Vous pouvez utiliser jQuery pour effectuer une vaste gamme de sélections d'objets dans votre application de CSS3, mais pour la plupart, vous utiliser les sélecteurs de base. Vous pouvez en savoir plus sur eux à jQuery. Voici une liste des…
 
 
 »  »  »  » Comment travailler avec de dialogue dans CSS3