IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Afficher une modal sur angular


Sujet :

Angular

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2022
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Novembre 2022
    Messages : 1
    Points : 2
    Points
    2
    Par défaut Afficher une modal sur angular
    Bonjour je suis actuellement sur un projet. Et l'un de mes objectif est de créer une modal, tous est fonctionnel sauf son apparition suite au clique sur le lien ou bouton correspondant. Pouvez-vous analyser mes partie de code afin d'en trouver l'erreur.

    Ps: je vous le demande car ça fait déjà presque 3 jours que je cherche.

    Voici le HTML:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <a role="button" class="js-document" haspopup="dialog" controls="dialog">Rapport</a>
     
    <div
      id="dialog"
      role="dialog"
      labelledby="dialog-title"
      describedby="dialog-desc"
      modal="true"
      hidden="true"
      tabindex="-1"
      class="c-dialog">
      <div role="document" class="c-dialog__box">
     
       <button
         type="button"
         label="fermer"
         title="fermeture modal"
         data-dismiss="dialog">X</button>
     
        <h2 id="dialog-title">Rapport</h2>
     
        <p id="dialog-desc">Veuillez indiquer de quelle manière vous avez fini cette compétence.</p>
     
        <p>
          <label for="rapport">Rapport</label><br/>
          <input type="text" id="rapport" />
        </p>
     
        <br/>
     
        <label for="select">Ressentit</label><br />
     
        <mat-select></mat-select>
     
        <p><button type="submit">Valider</button></p>
     
     
      </div>
    </div>

    Voici le SCSS:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .c-dialog {
      position: fixed;
      z-index: 100;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      padding: 2.4rem;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      background-color: rgba(black, .75);
      transition: .2s;
    }
     
    // dialog box
    .c-dialog__box {
      flex: 1;
      max-width: 48rem;
      margin: auto;
      padding: 2.4rem;
      background-color: white;
    }
     
    // hidden dialog
    .c-dialog[hidden="true"] {
      visibility: hidden;
      opacity: 0;
    }

    Et voici le JS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    const triggers = document.querySelectorAll('[aria-haspopup="dialog"]');
    const doc = document.querySelector('.js-document');
    const focusableElementsArray = [
      '[href]',
      'button:not([disabled])',
      'input:not([disabled])',
      'select:not([disabled])',
      'textarea:not([disabled])',
      '[tabindex]:not([tabindex="-1"])',
    ];
    const keyCodes = {
      tab: 9,
      enter: 13,
      escape: 27,
    };
     
    const open = function (dialog) {
      const focusableElements = dialog.querySelectorAll(focusableElementsArray);
      const firstFocusableElement = focusableElements[0];
      const lastFocusableElement = focusableElements[focusableElements.length - 1];
     
      dialog.setAttribute('aria-hidden', false);
      doc.setAttribute('aria-hidden', true);
     
      // return if no focusable element
      if (!firstFocusableElement) {
        return;
      }
     
      window.setTimeout(() => {
        firstFocusableElement.focus();
     
        // trapping focus inside the dialog
        focusableElements.forEach((focusableElement) => {
          if (focusableElement.addEventListener) {
            focusableElement.addEventListener('keydown', (event) => {
              const tab = event.which === keyCodes.tab;
     
              if (!tab) {
                return;
              }
     
              if (event.shiftKey) {
                if (event.target === firstFocusableElement) { // shift + tab
                  event.preventDefault();
     
                  lastFocusableElement.focus();
                }
              } else if (event.target === lastFocusableElement) { // tab
                event.preventDefault();
     
                firstFocusableElement.focus();
              }
            });
          }
        });
      }, 100);
    };
     
    const close = function (dialog, trigger) {
      dialog.setAttribute('aria-hidden', true);
      doc.setAttribute('aria-hidden', false);
     
      // restoring focus
      trigger.focus();
    };
     
    triggers.forEach((trigger) => {
      const dialog = document.getElementById(trigger.getAttribute('aria-controls'));
      const dismissTriggers = dialog.querySelectorAll('[data-dismiss]');
     
      // open dialog
      trigger.addEventListener('click', (event) => {
        event.preventDefault();
     
        open(dialog);
      });
     
      trigger.addEventListener('keydown', (event) => {
        if (event.which === keyCodes.enter) {
          event.preventDefault();
     
          open(dialog);
        } 
      });
     
      // close dialog
      dialog.addEventListener('keydown', (event) => {
        if (event.which === keyCodes.escape) {
          close(dialog, trigger);
        }     
      });
     
      dismissTriggers.forEach((dismissTrigger) => {
        const dismissDialog = document.getElementById(dismissTrigger.dataset.dismiss);
     
        dismissTrigger.addEventListener('click', (event) => {
          event.preventDefault();
     
          close(dismissDialog, trigger);
        });
      });
     
      window.addEventListener('click', (event) => {
        if (event.target === dialog) {
          close(dialog, trigger);
        }
      });
    });
    Merci d'avance au personne qui voudront bien m'aider.

  2. #2
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    t'embete pas avec du javascript.

    * utilise angular dialog (identique modal)
    https://material.angular.io/components/dialog/overview

    regardes l'onglets exemples (tu as les codes sources des exemples)

    * composants graphique gratuit

    https://material.angular.io/components/categories


    * faut installer angular material

    https://material.angular.io/guide/getting-started


    * ensuite dans le module si tu veux utiliser le dialog tu importe le package (voir l'onglet API dans la doc )
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    import {MatDialogModule} from '@angular/material/dialog';
     
    imports: [
       ...
       MatDialogModule,

    le principe est que tu importes que les packages modules dont tu as besoin !

Discussions similaires

  1. Réponses: 4
    Dernier message: 11/04/2008, 13h56
  2. Réponses: 9
    Dernier message: 28/10/2007, 21h53
  3. Réponses: 1
    Dernier message: 11/04/2007, 10h03
  4. Problème d'affichage de metadata sur image dicom
    Par pedrozo-81 dans le forum MATLAB
    Réponses: 2
    Dernier message: 27/03/2007, 13h22
  5. [MySQL] Problèmes d'affichage de requêtes sur Online
    Par mogway95 dans le forum PHP & Base de données
    Réponses: 8
    Dernier message: 25/05/2006, 01h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo