web-dev-qa-db-fra.com

Comment personnaliser les boutons d'alerte - window.confirm () et window.alert ()

J'ai vu de nombreux sites Web qui ont personnalisé leurs boîtes d'alerte et de confirmation avec un texte de bouton différent.

Par défaut, voici ce que la fonction JavaScript window.confirm() afficherait:

+-----------------------------+
|Message from webpage         |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [Ok]     [Cancel]         |
+-----------------------------+

Mais, que se passe-t-il si je souhaite une personnalisation comme le texte d'en-tête personnalisé et le texte de bouton personnalisé?

+-----------------------------+
|My custom Header             |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [HELLO]     [GOODBYE]     |
+-----------------------------+

Cela peut-il être réalisé en JavaScript, Jquery ou AJAX (ou une autre langue)? Si oui, pourriez-vous me montrer un exemple? Merci!

javascriptjquerypopup
13
pattyd

Je ne découvrirai rien de nouveau ici. Et les commentaires créés disent toutes les informations les plus pertinentes.

Vous devriez regarder des alternatives open source qui ont un grand support et sont faciles à personnaliser. Jetez un oeil à BootBoxJS (cela dépend de jQuery).

Sur ce site, vous pouvez trouver des exemples d'alertes, de boîtes de dialogue et d'autres outils utiles. par exemple.

confirm dialog personalized

Pour utiliser le logiciel mentionné:

  1. Téléchargez le bibliothèque js compressée (y compris js, css, etc.)
  2. Décompressez le fichier comme vous le souhaitez.
  3. Ensuite, copiez et collez l'exemple de code et enregistrez-le sous example.html ou ce que vous voulez.
  4. Modifiez maintenant les liens pour faire pointer vers vos fichiers téléchargés (voir comment j'ai changé mon fichier )
  5. Enregistrez le fichier et testez-le avec votre navigateur préféré.

Je viens de le faire et cela fonctionne parfaitement! (Sous Firefox et Chrome)

[~ # ~] note [~ # ~] : je l'ai testé avec la nouvelle version de BootStrap (v .3) et cela ne fonctionne pas.

5
Lucio

La réponse est simple: vous ne pouvez pas, les invites ne prennent pas en charge cette fonctionnalité,

Cependant, vous pouvez utiliser Jquery ou créer votre propre modal/dialogue pour émuler cette fonctionnalité.

Voir jQuery UI Dialo g pour des idées et des exemples.

Configuration de l'exemple à partir de la page consultez la jsfiddle

HTML:

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

JS

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

Le CSS est trop volumineux pour être publié, mais vous pouvez lier ce fichier:

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

6
isJustMe

Non. Un simple examen de les documents peut être utile. Java ont des éléments d'interface utilisateur de style similaire (mais distinctement différent) qui peuvent être ce que vous avez vu dans le passé.

Si vous le souhaitez, vous pouvez créer vos propres boîtes de dialogue à l'aide de HTML/CSS/JavaScript qui agissent comme des boîtes de dialogue d'agent utilisateur, mais cela représente beaucoup de travail pour le résultat.

1
Madbreaks