web-dev-qa-db-fra.com

Quelle est une bonne alternative à un modal appelant un autre modal?

L'exemple auquel je pense utilise un modal pour afficher une liste de références enregistrées. L'action secondaire pour cela serait d'envoyer cette liste par e-mail (à vous-même ou à partager).

Ces deux actions (affichant la liste des références et le formulaire d'emailing) sont actuellement des fenêtres modales.

Mes pensées sont:

  • qu'il devrait être dans un modal avec des étapes affichées dans ce modal
  • affiche les références sur une nouvelle page (sans utiliser de modaux) - superposition de modaux
interaction-designuser-behaviormodal-windows
9
Eliot Hill

Et si vous utilisiez une interface de type tiroir (de la conception matérielle) pour les références, avec un modal pour l'activité de vous l'envoyer par e-mail ou de la partager sur les réseaux sociaux?

Dans la couche principale, l'utilisateur est présenté avec le texte de l'article. Quand ils survolent le numéro de référence dans le texte, ils obtiennent une fenêtre contextuelle avec les détails de la référence, et un bouton disant "enregistrer la référence".

modal to allow user to save the reference

Dans la couche de tiroir, accessible en cliquant sur l'icône du hamburger en haut à gauche, ils peuvent voir leur liste de références enregistrées (cela pourrait également avoir des boutons pour les partager sur les réseaux sociaux, les supprimer, les exporter vers EndNote, les envoyer par e-mail à vous-même ou un ami, ou autre). L'utilisateur voudra probablement lui envoyer toutes les références enregistrées en une seule fois, plutôt qu'une à la fois.

viewing the saved references drawer

Bien qu'il s'agisse d'une conception pour un appareil mobile, elle peut également être utilisée sur le Web.

1
Yvonne Aburrow

J'envisagerais d'utiliser une action de retournement de carte à l'intérieur du modal pour passer en douceur entre les contenus au lieu d'utiliser un autre modal. Ce serait une transition plus douce et moins choquante. Chargez tout votre contenu dans le modal et masquez le contenu secondaire. Ensuite, peut-être une transition/bascule css pour basculer entre les contenus.

Peut-être utiliser ceci: https://nnattawat.github.io/flip/

0
Casey Govero

Si vous voulez vraiment utiliser des modaux pour les deux étapes, une bonne alternative à un modal appelant un autre modal est de remplacer le contenu (donc essentiellement ce que vous avez suggéré dans les solutions que vous avez fournies).

L'objectif d'un modal est de créer une zone de contenu qui attire l'attention des utilisateurs. Donc, si c'est ce dont vous avez besoin, une nouvelle page n'a pas de sens. Ce que vous devez analyser, c'est si vous avez vraiment besoin dans les deux cas du contenu d'un modal.

Je pense que vous devriez également lire les informations des Lignes directrices sur la conception des matériaux :

Évitez les dialogues qui lancent des dialogues

Les boîtes de dialogue de confirmation doivent éviter de lancer des boîtes de dialogue ou des menus simples supplémentaires, car ils ajoutent de la complexité et semblent augmenter l'élévation d'une application. S'ils sont nécessaires pour terminer une tâche, envisagez plutôt d'utiliser une boîte de dialogue plein écran.

En d'autres termes, vous pouvez envisager deux modaux, mais ce n'est que si vous en avez vraiment besoin pour effectuer une tâche.

0
Madalina Taina

Je pense que c'est juste une question de mise en page que vous utilisez.

Lorsque j'ai été confronté à ce problème de modal à partir de modal, je l'ai converti en quelque chose appelé mise en page de carte qui fait glisser le contenu précédent et ouvre un nouveau contenu sur le même modal en cliquant sur un bouton (Email, dans votre cas). C'est une façon.

Une autre façon de gérer la situation que vous avez décrite dans votre exemple est d'avoir un bouton de lien sur le premier modal lui-même pour ouvrir le client de messagerie par défaut avec le contenu souhaité comme ci-dessous:

$(function () {
  $('.SendEmail').click(function (event) {
    var email = '[email protected]';
    var subject = 'Test';
    var emailBody = 'Hi Sample,';
    var attach = 'path';
    document.location = "mailto:"+email+"?subject="+subject+"&body="+emailBody+
        "?attach="+attach;
  });
});

copié à partir du lien ( this ).

Si cela diffère de votre scénario, veuillez nous aider avec une capture d'écran ou un filaire.

0
Moksh