Le brouillon HTML 5.2 ajoute un nouvel élément de dialogue. Mais c'est une technique expérimentale.
Auparavant, si nous voulions créer n'importe quel type de boîte de dialogue modale ou de boîte de dialogue, nous devions avoir un arrière-plan, un bouton de fermeture, lier les événements dans la boîte de dialogue, organiser notre balisage d'une manière, trouver un moyen de transmettre le message. parler... c'est vraiment compliqué. L'élément de dialogue résout tous les problèmes ci-dessus.
Comparaison entre la boîte modale Bootstrap et la boîte modale nativeVoici la structure HTML d'une boîte modale bootstrap :
<!-- Le bouton déclenche la boîte modale--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> Commencer la démonstration de la boîte modale</button><!-- Boîte modale (Modal ) --><div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-hidden=true> × =modal-title id=myModalLabel> Titre modal</h4> </div> <div class=modal-body> Ajoutez du texte ici</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>Fermer</button> <button type=button class=btn btn-primary> Soumettre les modifications</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>
Voici la structure HTML d'une boîte modale native :
<!-- Le bouton déclenche la boîte modale--><button type=button class=btn>Afficher la boîte modale</button><!-- Boîte modale--><dialog open> Boîte modale native HTML5</ dialog>Style de boîte modale de base
Nous avons vu le balisage le plus simple d'un élément de boîte de dialogue, et vous avez peut-être remarqué que open est un attribut dans la boîte de dialogue ci-dessus. L'ajout de cet attribut à un élément forcera l'apparition de la boîte de dialogue, sinon elle sera supprimée. La boîte de dialogue sera également positionnée de manière absolue sur la page.
L'image ci-dessus montre un style de boîte modale de base.
Ouvrez le navigateur et vous pouvez voir que son style de base ressemble à ceci :
dialogue { affichage : bloc ; position : absolue ; gauche : 0px ; droite : 0px ; largeur : -webkit-fit-content ; couleur : noir ; marge : auto ; style de bordure : solide ; couleur de bordure : initiale ; image de bordure : initiale ; fond : blanc ;}
L'élément de dialogue introduit également un nouveau sélecteur de pseudo-classe ::backdrop. Le style ::backdrop par défaut affiché via le navigateur est le suivant :
dialog::backdrop { position : fixe ; haut : 0px à droite : 0px ; fond : 0px ; arrière-plan : rgba(0, 0, 0, 0.1);}Définir le style de dialogue
Nous pouvons styliser l'élément de dialogue comme n'importe quel élément HTML, et presque tous les styles CSS feront l'affaire. Grâce au sélecteur de pseudo-classe ::backdrop, nous pouvons l'utiliser pour définir le style de l'arrière-plan.
Par exemple:
boîte de dialogue{ margin-top:200px; width:250px; text-align:center; border-radius: 4px; box-shadow: 0 0 15px lightgray;} :toile de fond { arrière-plan : rgba(noir, .5);}
L'effet de style ci-dessus est le suivant :
API d'opération de dialogueVous trouverez ci-dessous une boîte de dialogue de base qui n'affiche rien visuellement car l'attribut open n'est pas défini. Vous devez utiliser l'API JavaScript pour l'afficher/masquer :
<dialog>Ceci est une boîte de dialogue ! </dialogue>
Les API .show() et .close() de l'élément de dialogue servent respectivement à afficher et fermer la boîte de dialogue. En utilisant ces deux API sur l'élément DOM, vous pouvez afficher et fermer la boîte de dialogue.
Par exemple:
<!-- HTML --><dialog> <p>Ceci est une boîte de dialogue ! </p> <button id=close>Fermer la boîte de dialogue</button></dialog><button id=show>Afficher la boîte de dialogue</button> <!-- script --> <script> var dialog = document. querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.show( }; document.querySelector(#close).onclick = function(){ dialog.close(); };</script>
Vous pouvez passer un paramètre à dialog.close(). En écoutant l'événement close de l'élément de dialogue, la propriété dialog.returnValue renverra la valeur donnée.
comme:
<!--HTML--><dialog> <p>Ceci est une boîte de dialogue ! </p> <p><input type=text id=return_value value= placeholder=Veuillez saisir le contenu/></p> <button id=close>Fermer la boîte de dialogue</button></dialog><button id=show >Afficher la boîte de dialogue</button><!--script--><script> var dialog = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.showModal(); }; document.querySelector(#close).onclick = function(){ var val = document.querySelector(#return_value).value; événement de fermeture d'élément dialog.addEventListener(close, function(){ alert(this.returnValue); });</script>
Une autre API pour afficher les boîtes de dialogue est .showModal()
Si vous ne souhaitez pas que l'utilisateur interagisse avec des objets d'élément de page autres que la boîte de dialogue, utilisez .showModal() pour ouvrir la boîte de dialogue au lieu d'utiliser .show(). La boîte de dialogue ouverte avec .showModal() aura un calque d'arrière-plan translucide sur toute la fenêtre, empêchant l'utilisateur d'interagir avec les objets d'élément de page en dehors de la boîte de dialogue. En même temps, la boîte de dialogue sera affichée au milieu de la fenêtre. par défaut (centré en haut, en bas, à gauche et à droite) ); et la boîte de dialogue ouverte avec .show() sera affichée en haut de la fenêtre par défaut (l'affichage centré peut être réalisé via CSS).
Après avoir fermé la boîte de dialogue, la fermeture déclenche un événement. De plus, l'utilisateur peut fermer la boîte de dialogue modale en entrant la touche Échap. Cela déclenchera l'événement d'annulation que vous pourrez annuler en utilisant event.preventDefault().
Intégrer avec des formulairesVous pouvez utiliser form[method=dialog] pour intégrer un formulaire avec un élément <dialog>. Une fois le formulaire soumis, il ferme la boîte de dialogue et définit dialog.returnValue sur la valeur du bouton de soumission qui a été utilisé.
De plus, vous pouvez utiliser la propriété autofocus pour vous concentrer automatiquement sur les contrôles de formulaire dans la boîte de dialogue lorsqu'elle apparaît.
Par exemple:
<!--HTML--><dialog id =dialog> <form method =dialog> <p>Acceptez-vous les conditions d'utilisation ? </p> <p><textarea class =form-control désactivé>Les termes nécessitent...</textarea></p> <type de bouton =valeur de soumission =Oui>Oui</bouton> <type de bouton =valeur de soumission = Pas d'autofocus>Non</button> </form></dialog><button id=show>Afficher la boîte de dialogue du formulaire</button><!--script--><script> var dialog = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ dialog.showModal( }); //Écouter l'événement de fermeture de l'élément de dialogue dialog.addEventListener(close, function(e){ if(this.returnValue = == Oui ){ alert(this.returnValue) //faire quelque chose... }else{ alert(this.returnValue) //faire quelque chose... });</script>Compatibilité du navigateur
Parmi les navigateurs de bureau, seul Google Chrome prend en charge toutes les fonctionnalités de dialog (au moment de la rédaction de cet article de blog). Pour obtenir une compatibilité entre navigateurs, veuillez utiliser dialog-polyfill.
<iframe src=//caniuse.com/dialog/embed scrolling=no allowtransparency=true allowfullscreen=true frameborder=0></iframe>
RéférencesArticle de référence : Démonstration d'éléments de dialogue
Projet open source Furenbibliothèque de fonctions habituellement js : https://github.com/JofunLiang/habituellementjs
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.