comment on fait une modale en javascript

je galere à trouver des bon liens

shoryuken

hadouken

you must defeat sheng long to stand a chance

Pour créer une modale en JavaScript, vous pouvez utiliser une combinaison de HTML, CSS et JavaScript. Voici les étapes générales à suivre :

Créez une structure HTML pour la modale. Cela peut inclure une div pour la modale elle-même, une div pour le contenu, et des boutons pour fermer la modale.
Utilisez CSS pour cacher la modale par défaut en définissant la propriété "display" à "none".
Ajoutez un événement de clic à un bouton ou un lien pour afficher la modale. Dans cet événement, utilisez JavaScript pour afficher la modale en définissant la propriété "display" à "block".
Ajoutez un événement de clic à un bouton pour fermer la modale. Dans cet événement, utilisez JavaScript pour cacher la modale en définissant la propriété "display" à "none".
Voici un exemple de code HTML/CSS/JavaScript pour créer une modale simple :

Dans cet exemple, la modale est cachée par défaut grâce à la propriété "display: none" dans le CSS. Lorsque l'utilisateur clique sur le bouton avec l'id "myBtn", la modale est affichée grâce à JavaScript qui définit la propriété "display" à "block". Lorsque l'utilisateur clique sur le bouton de fermeture (la croix), ou en dehors de la modale, la modale est cachée grâce à JavaScript qui définit la propriété "display" à "none".

En gros tu fais une div que tu positionne au milieu de l'écran avec une position absolute. Tu lui met un display:none
Tu rajoutes un évent clic sur l'élément que tu veux pour que ça ouvre ta modal, quand il y a l'évent tu rajoutes display: block à la div créé précédemment

Le 06 avril 2023 à 10:39:57 :
Pour créer une modale en JavaScript, vous pouvez utiliser une combinaison de HTML, CSS et JavaScript. Voici les étapes générales à suivre :

Créez une structure HTML pour la modale. Cela peut inclure une div pour la modale elle-même, une div pour le contenu, et des boutons pour fermer la modale.
Utilisez CSS pour cacher la modale par défaut en définissant la propriété "display" à "none".
Ajoutez un événement de clic à un bouton ou un lien pour afficher la modale. Dans cet événement, utilisez JavaScript pour afficher la modale en définissant la propriété "display" à "block".
Ajoutez un événement de clic à un bouton pour fermer la modale. Dans cet événement, utilisez JavaScript pour cacher la modale en définissant la propriété "display" à "none".
Voici un exemple de code HTML/CSS/JavaScript pour créer une modale simple :

<!-- Structure HTML pour la modale -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Ceci est une modale.</p>
</div>
</div>

<!-- CSS pour cacher la modale par défaut -->
<style>
.modal {
display: none; /* caché par défaut */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>

<!-- JavaScript pour afficher/cacher la modale -->
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
modal.style.display = "block";
}

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Dans cet exemple, la modale est cachée par défaut grâce à la propriété "display: none" dans le CSS. Lorsque l'utilisateur clique sur le bouton avec l'id "myBtn", la modale est affichée grâce à JavaScript qui définit la propriété "display" à "block". Lorsque l'utilisateur clique sur le bouton de fermeture (la croix), ou en dehors de la modale, la modale est cachée grâce à JavaScript qui définit la propriété "display" à "none".

tu te sens intelligent à faire ça ?

Bon ben voilà je me suis fais chier à écrire alors que l'ia l'a sorti en 10 secondes, GR

Le 06 avril 2023 à 10:39:58 :
En gros tu fais une div que tu positionne au milieu de l'écran avec une position absolute. Tu lui met un display:none
Tu rajoutes un évent clic sur l'élément que tu veux pour que ça ouvre ta modal, quand il y a l'évent tu rajoutes display: block à la div créé précédemment

je vois le cheminement comment tu rajoutes lors de l'evenement (addeventlistener('click')) le display:block
c'est là ma grosse galere en javascript faut lui faire dire quoi j'en chie avec javascript
faut faire une fonction qui renvoit toujours vraie ?
et l'élément avec la div en querySelector, je le crée dans une variable const la variable const doit etre parent ou enfant de l'evenement

Le 06 avril 2023 à 10:41:05 :
Bon ben voilà je me suis fais chier à écrire alors que l'ia l'a sorti en 10 secondes, GR

c'est bien plus concis que le pavé indigeste de l'iahttps://image.noelshack.com/fichiers/2017/18/1494048058-pppppppppppppppppppp.png

Le 06 avril 2023 à 10:41:05 :
Bon ben voilà je me suis fais chier à écrire alors que l'ia l'a sorti en 10 secondes, GR

le prob de l'ia c'est que ça explique pas clairement les rattaches on peut s'y retrouver une fois le css installé pour les modif mais jamais on s'y retrouve dans le javascript

en tout cas merci au moins vous répondez ça fait plaiz

Le 06 avril 2023 à 10:44:38 :

Le 06 avril 2023 à 10:39:58 :
En gros tu fais une div que tu positionne au milieu de l'écran avec une position absolute. Tu lui met un display:none
Tu rajoutes un évent clic sur l'élément que tu veux pour que ça ouvre ta modal, quand il y a l'évent tu rajoutes display: block à la div créé précédemment

je vois le cheminement comment tu rajoutes lors de l'evenement (addeventlistener('click')) le display:block
c'est là ma grosse galere en javascript faut lui faire dire quoi j'en chie avec javascript
faut faire une fonction qui renvoit toujours vraie ?
et l'élément avec la div en querySelector, je le crée dans une variable const la variable const doit etre parent ou enfant de l'evenement

Pour déclencher un événement en JavaScript, vous pouvez utiliser la méthode addEventListener qui permet de lier une fonction à un événement spécifique (par exemple, un clic de souris). La fonction liée à l'événement peut alors modifier les propriétés CSS de l'élément cible pour afficher ou cacher un élément de la page.

Voici un exemple de code qui montre comment créer une fonction qui sera appelée lors d'un clic sur un bouton, et qui modifie le style CSS d'une div pour afficher ou cacher un élément :

Dans cet exemple, nous avons créé une fonction appelée toggleModal qui vérifie l'état actuel de l'affichage de la div modal en regardant la valeur de sa propriété CSS display. Si display est égal à none, la fonction définit la propriété display à block pour afficher la div. Si display est déjà block, la fonction définit display à none pour cacher la div. Nous avons ensuite lié cette fonction à l'événement "click" du bouton à l'aide de addEventListener.

Pour répondre à votre deuxième question, la variable const qui contient la référence à l'élément cible peut être déclarée n'importe où dans le code, en tant que parent ou enfant de l'événement. Ce qui est important, c'est que la variable contient une référence valide à l'élément que vous voulez modifier. Dans notre exemple, nous avons utilisé document.querySelector pour récupérer la référence aux éléments cible, mais vous pouvez également utiliser d'autres méthodes pour récupérer la référence, comme document.getElementById ou document.getElementsByClassName.

apres si c'est juste une modale qui apprait disparait tu peux la faire en css html uniquementhttps://image.noelshack.com/fichiers/2018/25/2/1529422413-risitaszoom.png

exemple: https://codepen.io/peiche/pen/kQwYVJ

Go demander à ChatGpt

Pour vous une modale c’est une div au milieu d’une page ?

Dans mon boulot quand on parle de modale c’est toujours pour parler d’une popup

Le 06 avril 2023 à 10:48:54 :
Pour vous une modale c’est une div au milieu d’une page ?

Dans mon boulot quand on parle de modale c’est toujours pour parler d’une popup

moi je dis juste popup persohttps://image.noelshack.com/fichiers/2016/36/1473263957-risitas33.png

une modal j'ai cru comprendre que c'est un comportement plus poussé qu'une popup ca va plus loin qu'une notif, par exemple un chatbot ou un apercu du panier ...

Les dev disent popup, les designer modal

Le 06 avril 2023 à 10:52:11 :
Les dev disent popup, les designer modal

non c'est vraiement des noms qui sont propre:
https://ux.stackexchange.com/questions/90336/whats-the-difference-between-a-modal-popup-popover-and-lightbox

D’accord merci c’est un peu plus clair même s’il faudrait creuser