Coder une fenêtre Modale en JavaScript

Рет қаралды 24,377

Күн бұрын

Пікірлер: 67

@EcoleduWeb Жыл бұрын

🎓 Tous mes cours sur l'École du Web (pour les obtenir tous d'un coup) : www.ecole-du-web.net/ 📚 Tous mes cours sur UDEMY : liste-des-cours.com/

@zombie-p7s Жыл бұрын

Modal JS. Votre chaîne est incroyable,une vraie bible du dev et le tout expliqué avec énormément de patience Et de pédagogie ! On ressent vraiment votre passion, vous avez la fibre pour être enseignant.Cordialement.

@EcoleduWeb Жыл бұрын

Merci beaucoup !

@nicolasbarthes7622 3 жыл бұрын

Comme d’hab le meilleur contenu du net est ici avec toi Enzo, grand merci ! 🙏🏻

@leorip5563 3 жыл бұрын

J'apprends toujours un truc (ou +) grâce à tes vidéos. Merci 🙂👍

@nougatartine 2 жыл бұрын

J'aime beaucoup tes cours et ta manière d'enseigner je te remercie ! ModalJs ^^

@aloascreations4916 Жыл бұрын

ModalJs ;-) J'adoreeeeeee, comme d'hab, simple, clair & toujours si bien expliqué 👍👍

@kamidri1884 2 жыл бұрын

Vraiment tes vidéos me donne goût au dev front. Infiniment merci

@EcoleduWeb 2 жыл бұрын

Vive le Front 😁

@ludovicleveque3485 2 жыл бұрын

merci. 🙏 Un tuto riche. des explications brèves concises et bienveillantes. et une animation au téléchargement du code source excellente !!!!😂. C'est sympa de donner ton code source ça permet de trouver le bug quand on le refait ... et de comprendre encore mieux !!!👍

@EcoleduWeb 2 жыл бұрын

Merci beaucoup pour ce merveilleux retour!🙏

@benoitbonnoron4753 2 жыл бұрын

Juste PARFAIT ! Merci pour ce contenu de très grande qualité et excellemment bien expliqué !

@etudiantopenclass5605 2 жыл бұрын

Bonjour ENZO, merci pour tes vidéos et tes explications super claire.

@Skyflyer 3 жыл бұрын

Bonjour Enzo, Merci beaucoup pour cette vidéo très intéressante. J'espère que tu continueras à nous partager des exemples sur l'accessibilité. ModalJS

@victoretcompagnie5480 3 жыл бұрын

ModalJs. Toujours d'aussi bon tuto 👍

@sebastienmartinez6249 3 жыл бұрын

j'aime beaucoup l'animation, je maîtrise pas suffisamment pour faire des transitions aussi propre du coup ça fait un bon exercice à refaire Très bonne video

@sebastienmartinez6249 3 жыл бұрын

modaljs au fait; une video ça se regarde jusqu'au bout ^^

@darknight-rk4ch 3 жыл бұрын

Merci beaucoup bro Tu peux faire une vidéo sur les Regex 😉 merci encore

@EcoleduWeb 3 жыл бұрын

Vous pouvez ajouter overflow-y: hidden au body quand la modale est ouverte afin d'empêcher le scroll sur la page.

@stefanesperanza4859 2 жыл бұрын

Bonjour, aurait tu une solution pour faire une fenêtre modale qui sert juste à affiché un message pendant X secondes 100% javascript. Juste à appeler par une fonction, est-ce possible ? Pour le corps j'ai tenté le coup avec : function modalWindow(titre, message) { const styleBtn = "padding: 10px 14px; font-size: 18px; margin: 100px auto; display: block; min-width: 150px; cursor: pointer" const styleContainer = "visibility: hidden; position: fixed; top: 0; width: 100vw; height: 100vh; transition: visibility 0.4s;" const parent = document.querySelector("#cart__items") parent.innerHTML += ` X ${titre} ${message} ` } Dans cet exemple il y a le X pour fermer, mais même ca en vrai je n'en veux pas, juste quelle se ferme avec X seconde.

@gerry7924 2 жыл бұрын

salut merci beaucoup pour ta vidéo. Je viens de remarquer qu'avec le link boostrap ça ne marche pas. tu sais pourquoi ?

@guymichelfoko2175 2 жыл бұрын

merci pour la vidéo. j'ai un petit souci avec la propriété z-index. je sais pas trop comment formuler mon problème. je sais pas comment s'affranchir du fait que la priorité d'un élément par rapport à un autre de parent diffèrent ne tient pas compte du z-index de ses 2 éléments mais celui de ses parents. si par exemple je crée une modal donc le contenu est dans un parent de basse priorité je sais pas comment faire pour qu'elle passe aux déçu de tout malgré tout. j'ai pensé à la solution JavaScript en modifiant dynamiquement les z-index du parent de la modal aux clix mais j'aimerais savoir si c'est passible de faire autrement. (un css si possible). merci d'avance🙏

@GrenadineGrenade77 2 жыл бұрын

Bonjour - Partout on parle de UNE fenêtre modale. Mais moi je vaux afficher des images en grand format dans une modale et j'ai plusieurs images éparpillées dans la page. Donc une modale pour chaque grande image. Comment faire ?

@mynoise8490 2 жыл бұрын

Bonjour, j'aimerais savoir comment faire pour créer plusieurs modales sur une même page. J'ai essayé en changeant le nom des classes (et en adaptant dans le css et le js) mais ça n'a pas l'air de marcher

@nackir4141 3 жыл бұрын

modaljs 😁 Comme tu l'as dit plein de trucs pour aller plus loin... je retourne au cours PHP maintenant 😋

@shevaron4054 5 ай бұрын

je ne recois pas le code source lorsque j'ajoute mon adresse mail

@adamlonewolf1563 2 жыл бұрын

Merci beaucoup pour ta vidéo ! ^^ Tutoriel bien expliqué et tes explications sont assez claires histoire de comprendre la logique derrière chaque étape. Par contre j'aurais 2 questions à te poser: -Est ce qu'on peut modifier la tailler de la fenêtre à sa guise la rendre énorme pour ajouter beaucoup plus d'éléments etc.. ? -Si on crée plusieurs fenêtres modales par exemple et qu'elles doivent apparaître de la même manière (comme celle de ta vidéo) il y'aura pas de problème ? (elles vont pas se mélanger , etc..) ? et sinon, ModalJS !! ^^

@EcoleduWeb 2 жыл бұрын

Merci! 1. Oui tu peux créer des modales avec beaucoup de contenu, Il va falloir jouer avec la scrollbar de la modale et/ou du container de la modale tout en cachant celle du body (overflow-y). Bootstrap possède ce genre de modale, tu peux inspecter le code source pour trouver les propriétés qu'ils utilisent. 2. On peut en créer autant qu'on veut, il va simplement falloir les différencier avec une classe ou un ID afin de lier le bon déclencheur(bouton en général) à la bonnne modale.

@obiquankenobi3155 8 ай бұрын

Bonjour. Y-a-t-il la possibilité d'imprimer la fenêtre modale à la taille fixée ? Merci

@EcoleduWeb 8 ай бұрын

Oui.

@bernardviguier9124 Жыл бұрын

Merci Enzo ! puis-je aisément transformer mon PHP 7.4 en JS pour activer ma modale en gardant le CSS utilisé par PHP.

@Shakurjor 7 ай бұрын

peut t-on faire la même chose mais juste en survole d'un sous titre par exemple??????

@Gaulois1603 2 жыл бұрын

bonjour, c'est quoi la différence entre "100vh" et "100%" ? merci

@ludovicleveque3485 2 жыл бұрын

une question pratique... on peut créer un formulaire de connexion utilisateur dans une modale ?

@EcoleduWeb 2 жыл бұрын

On peut, mais il faut bien faire attention à l'accessibilité & l'UX 👍

@ingenio_electronics 2 жыл бұрын

je pas reçue votre code a mon mail

@shlomozerbib388 3 жыл бұрын

Il me semble que bootstrap possede deja un modal

@EcoleduWeb 3 жыл бұрын

Bien sûr mais on utilise pas tout le temps bootstrap 👍 Notamment si on a juste envie de faire une modale.

@Jordan-ie5nd 3 жыл бұрын

Merci pour la vidéo. N'aurait-on pas pu utiliser l'attribut defer afin de mettre le script dans le head plutôt que de le laisser à la fin du body à l'ancienne ? Ensuite, par rapport à la remarque sur les fonction normales/fléchées, pour moi il n'y a aucune dif de perf, c'est juste la valeur du this qui est géré différemment. Les fonctions fléchées ayant un this global. Les fonctions normales pouvant prendre un contexte de this particulier. (de base et également via des méthodes tel que bind() etc). Ai-je tort ? Sinon bonne vidéo, j'aurais peut-être aimé avoir une modale plus complète avec un form par exemple, et une gestion de l'enfermement du focus etc.

@EcoleduWeb 3 жыл бұрын

Hey, 1. Je n'ai pas trouvé d'utilité à parler de defer dans cette vidéo. 2. Tu n'as pas tort. Le this fait référence au contexte englobant pour les FF. Et de manière générale il peut avoir des valeurs différentes selon les cas d'utilisations. (mode strict, dans un objet, etc...) Merci!

@Jordan-ie5nd 3 жыл бұрын

@@EcoleduWeb merci à toi !

@Khalife21 Жыл бұрын

Est ce que tu pourrai faire une vidéo sur comment créer une modale dans une modale

@PaddleTI 3 жыл бұрын

Bonjour Enzo, merci beaucoup pour cette vidéo, très instructive, comme d'habitude. Pour centrer l'élément ".modal", pourquoi n'utilises-tu pas les propriétés "display:flex; justify-content:center; align-items:center;" sur le conteneur ? Cela semblerait plus simple, as-tu une raison pour ne pas utiliser Flexbox dans ce contexte ?

@EcoleduWeb 3 жыл бұрын

Bonne remarque, le container a deux enfants, l'overlay et la modal, si je flex c'est que j'ai envie de gérer leur position avec flexbox or je la gère avec pos absolute pour l'overlay. C'est donc logique que je continue avec position absolute pour la modale afin de la placer sur l'overlay. J'aurai pu néanmoins utiliser flex sur le container puis position: relative sur la modale et ça aurait donné le même résultat visuel. Il y a souvent plusieurs façons de faire :).

@azeddinelachhab1671 3 жыл бұрын

Nice one. Modaljs

@saadfarid2675 3 жыл бұрын

ModalJS 😍

@Buffalo_Debile 3 жыл бұрын

Prochain tuto, comment faire un skeleton de loading stp

@laurentfauvel1525 2 жыл бұрын

Bonjour Enzo, Je viens de découvrir ta chaine en cherchant comment gérer une modale :-) Tous tes tutos semblent très intéressants et je vais me plonger dans leurs visionnage. Je suis néophyte en développement javascript et pas beaucoup mieux en HTML / CSS :-) Je me pose la question suivante : - Comment récupérer l'ID (en supposant que nous en ajoutions un) de l'élément appelant la modale. Cas d'utilisation : Plusieurs boutons ou liens appelant une même modale dans laquelle les textes des et sont adaptés en fonction du bouton ou lien d'appel.

@EcoleduWeb 2 жыл бұрын

Merci beaucoup ! Pour récupérer l'ID il suffit de le sélectionner en JS et de lire sa propriété "id". const btn = document.querySelector(".btn1) console.log(btn1.id) La doc : developer.mozilla.org/fr/docs/Web/API/Element/id

@laurentfauvel1525 2 жыл бұрын

@@EcoleduWeb Bonjour Enzo, Merci pour ta réponse, mais j'ai du mal formuler ma question car ta proposition ne correspond pas exactement à ce que je recherche toutefois elle m’a permis de trouver une solution qui fonctionne mais je ne sais pas si elle est "propre" Rappel du besoin : Dans une page, j'ai plusieurs éléments qui sont susceptibles d’ouvrir une même fenêtre modale. Pour chaque élément déclencheur je souhaite adapter le texte à afficher dans la modale. Pour cela, j’ai un tableau qui contient les textes à afficher et je dois sélectionner le texte correspondant à l’élément qui a déclenché la demande d’affichage de la modale. La clé de recherche dans le tableau des textes à afficher correspond à l’ID de l’élément déclencheur c’est pourquoi je cherchais à identifier cet ID dans la fonction de gestion de l’affichage de la modale. La solution que j’ai trouvée pour identifier l’ID de l’élément appelant est d’utiliser : this.id. Apparemment quand la fonction d’affichage de la modale est appelée, le « contexte » this est celui de l’élément appelant la fonction. console.log(this.id) fourni bien l'ID de l'élément appelant. Merci pour ta chaine.