Coder une fenêtre Modale en JavaScript

[@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 !

[@aloascreations4916]

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

[@leorip5563]

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

[@nicolasbarthes7622]

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

[@nougatartine]

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

[@benoitbonnoron4753]

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

[@kamidri1884]

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

[@EcoleduWeb]

Vive le Front 😁

[@etudiantopenclass5605]

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

[@ludovicleveque3485]

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]

Merci beaucoup pour ce merveilleux retour!🙏

[@victoretcompagnie5480]

ModalJs. Toujours d'aussi bon tuto 👍

[@darknight-rk4ch]

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

[@Skyflyer]

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

[@EcoleduWeb]

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

[@stefanesperanza4859]

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.

[@sebastienmartinez6249]

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]

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

[@nackir4141]

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

[@adamlonewolf1563]

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]

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.

[@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.

[@guymichelfoko2175]

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🙏

[@azeddinelachhab1671]

Nice one. Modaljs

[@Buffalo_Debile]

Prochain tuto, comment faire un skeleton de loading stp

[@saadfarid2675]

ModalJS 😍

[@gerry7924]

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

[@PaddleTI]

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]

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 :).

[@Khalife21]

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

[@Shakurjor]

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

[@bendevweb89]

Intéressant aussi la technique de transition sur le parent pour obtenir une animation fluide et cohérent. "modaljs"

[@Gaulois1603]

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

[@mynoise8490]

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

[@laurentfauvel1525]

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]

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]

@@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.

[@GrenadineGrenade77]

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 ?

[@Jordan-ie5nd]

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]

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]

@@EcoleduWeb merci à toi !

[@prince_baal]

plus qu'à voir pour les resizer ou les déplacer 😁 ModalJS

[@obiquankenobi3155]

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

[@EcoleduWeb]

Oui.

[@shevaron4054]

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

[@ludovicleveque3485]

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

[@EcoleduWeb]

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

[@shlomozerbib388]

Il me semble que bootstrap possede deja un modal

[@EcoleduWeb]

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

[@ingenio_electronics]

je pas reçue votre code a mon mail

[@natachabazie6496]

Bonjour modaljs

[@adaben7978]

modal JS

[@sarahfouchy230]

ModalJs

[@martinkeita7008]

Modal Js ma gueule!

[@maahndamemmanuelkenny9115]

modal js

[@steve-rolandndetsapi5139]

ModalJS

[@audmbag4444]

"ModalJs"

[@nathanbenais6074]

modalJs

[@dehbiahachi1055]

modaljs

[@johan97211]

modaljs

[@daveglad3554]

ModalJs

[@netsuretsu1802]

ModalJS

[@danielyoman2221]

modaljs

[@fendrhil]

ModalJS

[@fenicitta11]

modaljs