Remplacez les boîtes de dialogue JavaScript par une nouvelle boîte de dialogue HTML

Dites adieu à la boîte de dialogue JavaScript et embrassez HTML<dialog></dialog> élément! Cet article montrera comment utiliser HTML<dialog></dialog> Les éléments et les classes JavaScript remplacent élégamment les boîtes de dialogue JavaScript traditionnelles ( alert() , confirm() et prompt() ) et améliorent l'expérience et l'accessibilité des utilisateurs.

Êtes-vous fatigué de ces styles monotones et de ces boîtes de dialogue JavaScript limitées? Bien qu'ils soient pratiques, ils ont des lacunes dans l'accessibilité, la personnalisation du style et la modernisation. Cet article fournira une alternative plus flexible et puissante.

J'ai utilisé des appels API et des boîtes de dialogue JavaScript dans un projet pour collecter les commentaires des utilisateurs. En attendant qu'un autre développeur termine<modal></modal> Pendant le développement du composant, j'ai utilisé des fonctions alert() , confirm() et prompt() . Par exemple:

 const DeleteLocation = Confirm («Supprimer l'emplacement?»);
if (deleteLocation) {
  alert («emplacement supprimé»);
}

À l'heure actuelle, j'ai réalisé alert() , confirm() et prompt() sont livrés avec de nombreuses fonctionnalités de fenêtre modales souvent négligées:

1. True Fenêtre modale: toujours au-dessus de la pile, même en z-index: 99999;<div> Au-dessus de.<li> <strong>Accès au clavier:</strong> Appuyez sur Entrée pour confirmer, appuyez sur Escape pour annuler.</li> <li> <strong>Écran amical:</strong> déplacer la mise au point et permettre la lecture du contenu des fenêtres modales.</li> <li> <strong>Capture de mise au point:</strong> appuyer sur la touche de l'onglet ne saute à aucun élément focalisable sur la page principale (mais dans Firefox et Safari, la mise au point passe vers l'interface utilisateur du navigateur. Curieusement, il est impossible d'utiliser la touche de tabulation pour déplacer la mise au point vers les boutons "Accepter" ou "Annuler" dans n'importe quel navigateur).</li> <li> <strong>Prise en charge des préférences des utilisateurs:</strong> les modes clairs et sombres sont pris en charge hors de la boîte.</li> <li> <strong>Exécution du code de pause:</strong> attendez la saisie de l'utilisateur.</li> <p> Ces méthodes JavaScript répondent à mes besoins dans 99% des cas. Alors, pourquoi je ne les utilise pas souvent (et d'autres développeurs Web)? Probablement parce qu'ils ressemblent à des erreurs système et ne peuvent pas être stylisés. Une autre considération importante est qu'ils sont progressivement dépréciés. La première consiste à le supprimer de l'Iframe inter-domaine, qui serait complètement supprimé de la plate-forme Web à l'avenir, bien que ce plan semble être mis en pause.</p> <p> Dans cet esprit, quelles alternatives devons-nous remplacer <code>alert() , confirm() et prompt() ? Vous avez peut-être entendu parler de HTML<dialog></dialog> Éléments, cet article se concentrera sur la façon de l'utiliser en conjonction avec les classes JavaScript.

   Bien qu'il soit impossible de copier complètement la fonctionnalité complète de la boîte de dialogue JavaScript, si nous<dialog></dialog> showModal() est utilisée en conjonction avec Promise (Promise peut résoudre (accepter) ou rejeter (annuler)), afin que nous puissions obtenir presque les mêmes fonctionnalités. Aller plus loin, faisons-le pour HTML<dialog></dialog> Les éléments ajoutent des effets sonores, tout comme une vraie boîte de dialogue système!

   Si vous souhaitez voir la démo maintenant, visitez ici.

   Classe de Dialog JavaScript

   Tout d'abord, nous avons besoin d'une classe JavaScript de base qui contient un objet de paramètres qui sera fusionné avec les paramètres par défaut. Ces paramètres seront utilisés pour toutes les boîtes de dialogue à moins que vous ne les écrasiez lorsqu'ils sont invoqués (plus à ce sujet plus tard).

    Exporter la boîte de dialogue de classe par défaut {
     constructeur (paramètres = {}) {
       this.settings = object.assign (
         {
           / * Paramètres par défaut - Voir Description ci-dessous * /
         },
         paramètres
       ));
       this.init ();
     }
     // ...
   }

   Les paramètres incluent:

   • accept : l'étiquette du bouton "Accepter".
   • bodyClass : la boîte de dialogue est ouverte et le navigateur ne le prend pas en charge<dialog></dialog> Lorsqu'il est ajouté à la classe CSS de l'élément.
   • cancel : l'étiquette du bouton "Annuler".
   • dialogClass : ajouter à<dialog></dialog> Classe CSS personnalisée pour les éléments.
   • message :<dialog></dialog> Contenu interne.
   • soundAccept : L'URL du fichier audio que l'utilisateur lit lorsque vous cliquez sur le bouton "Accepter".
   • soundOpen : L'URL du fichier audio que l'utilisateur lit lorsque la boîte de dialogue est ouverte.
   • template : un modèle HTML facultatif, injecté dans<dialog></dialog> milieu.

   Modèles d'initialisation et détection de support du navigateur

   Dans init , nous ajouterons une fonction d'assistance pour détecter le HTML du navigateur<dialog></dialog> Prise en charge des éléments et définissez HTML de base:

    init () {
     // Test<dialog> Prise en charge de This.DialogSupported = typeof htmlDialogElement === 'function';
     this.dialog = document.CreateElement ('Dialog');
     this.dialog.dataset.component = this.dialogsupporté?
     this.dialog.role = 'dialogue';
   
     // modèle html this.dialog.innerhtml = `
       <fieldset data-ref="fieldset" role="document">
   <legend data-ref="message"></legend>
   <div data-ref="template"></div>
   </fieldset>
   <menu></menu> `;
   
     document.body.appendChild (this.dialog);
     // ...
   }</dialog>

   Paire de navigateurs<dialog></dialog> La situation de support varie, nous devons donc effectuer une détection et fournir une solution de secours.

   (Les étapes suivantes sont similaires au texte d'origine, et la longueur est trop longue. Certains détails de code sont omis ici, mais la logique des clés et les extraits de code sont conservés, et la langue est polie et ajustée.)

   ... (omettez certains détails de code, y compris les références de nœud DOM, les attributs de bouton, les événements de bouton d'annuler, les polyfills qui ne prennent pas en charge les navigateurs, la navigation au clavier, l'affichage<dialog></dialog> , en attendant la saisie de l'utilisateur, se cacher<dialog></dialog> , Focus Traitement, Ajouter des méthodes d' alert , confirm et prompt , des styles asynchrones / en attente, des nuages ​​croisés, des exemples de dialogue personnalisés, etc.) ...

   Résumer

   Grâce aux solutions fournies dans cet article, vous pouvez facilement utiliser HTML plus moderne et flexible<dialog></dialog> Les éléments remplacent les boîtes de dialogue JavaScript traditionnelles pour améliorer l'expérience utilisateur et l'accessibilité des applications. N'oubliez pas d'ajuster le style et les fonctionnalités en fonction de vos besoins spécifiques pour créer une boîte de dialogue personnalisée qui vous convient le mieux.