Multiple modal

05 juin 2023, 10:34

Bonjour à tous !
J'ai une petite question qui peut paraitre bête mais je sais pas faire autrement pour le moment.

Alors plus je code une page web plus le nombre de modal s'accumule dans le code plus il y a de code html.
Ma question est :
Pourrait t-on pas faire une div et mettre le modal à l'intérieur selon le bouton cliqué histoire d'avoir un code plus propre si oui quelle est la façon ?

Je ne trouve rien sur le web à part les modals multiples qui encore une fois nécessite plusieurs modal en bas de la page (tonnes de lignes plus ou moins pareil ).

S'il y a d'autre techniques pour éviter d'avoir plusieurs modal codé en html sachant que j'ai déjà codé le tout en mode dynamique PHP c'est à dire qu'avec une seule ligne de PHP , j'ai mon modal dans la partie htm.

Je sais aussi qu'on peut hide/show/block/none(jquery) mais le code reste visible malgré tout.
Pour le moment je cherche avec un truc comme ça ...
Merci pour vos réponses

Code : Tout sélectionner

$(".modal").each(function() { 
)];

05 juin 2023, 13:42

Bonjour,

Tu pourrais avoir une seule modal html et utiliser Ajax (via jQuery ou via l'API Fetch) pour charger le contenu de la modal en fonction du bouton cliqué.

06 juin 2023, 13:45

J'ai plus ou moins réussie pas sur que ça soit propre avec des data- dans le bouton qui ouvre un seul modal que je récupére en js/jquery

Code : Tout sélectionner

$('document').ready(function(){

  $('#modalMulti').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  var type = button.data('type');
  var form = '<div><form>...</form></div>';
  modal.find('.modal-body').html(form);
  });

mais ensuite pour le contenu du modal-body ça se complique j'ai trouvé un truc du genre

Avec les data- je peux faire des fonctions et conditions selon ce que j'ai besoin.
ex : if type = form (j'affiche la div form ) etc
Par contre je sais pas si c'est correct de mettre du string dans une variable js ?

06 juin 2023, 14:05

L'utilisation des attributs data semble une bonne idée mais il faudrait voir le reste de ton code pour comprendre ce que tu essayes de faire.
A priori tu utilises Boostrap, je suppose que tu utilises la version 4 ?
Peux-tu nous partager un exemple minimaliste et reproductible de ta page html/js ?

06 juin 2023, 19:08

En bas de ma page HTML (Model MVC)

 ViewModal::modalMulti();

Ca renvoi vers un simple modal ds ma page php class modal => Modal Content+top(rajouter)+body+footer. chaque div est vide.
Mon button d'appel ou mes, seules les datas changent du coup.

<button type="button" name="button" class="" data-name="nameInput" data-info="Choisir une image ..." data-title="Dossier Profil" data-action="add_image" data-toggle="modal" data-type="uplodSimple" data-target="#modalMulti">
<img src="public/img/ico/mg.png" width="130px" height="85px" class="" >
</button>

Les data- dynamique
name => name input
title => titre du modal
info second titre etc ...
type => switch type => et j'affiche le html selon les besoin ex : pour le type form/uploadSimple(img)/ConfirmeAction(yes/no)

Code : Tout sélectionner

$('document').ready(function(){

  $('#modalMulti').on('show.bs.modal', function (event) {

  var button = $(event.relatedTarget)
  switch (type)
  {
  case 'uploadSimple':
      modal.find('.modal-title').text(title);
      modal.find('.modal-top').html("");
      modal.find('.modal-body').html(form);
      modal.find('.modal-footer').html("");
            break;
}
});

J'espère que tu comprends j'ai pas mis les fonctions de preview et d'autres alors tout fonctionne juste peur que le multi input fasse défaut avec plusieurs names input mais chaque formulaire est différent donc je verrais c'est pour ça le :

Code : Tout sélectionner

var formulaire = '<form>[...]</form>;

risque d'être un peu long je sais pas si c'est correct de mettre 10 lignes dans une variable JS

06 juin 2023, 20:44

risque d'être un peu long je sais pas si c'est correct de mettre 10 lignes dans une variable JS

Tu peux en concaténant tes lignes :

Code : Tout sélectionner

var variable = 'une première ligne' + 
                 'une seconde' +
etc

07 juin 2023, 12:03

Vu le code que tu présentes, j'ai peur de t'avoir orienté vers une fausse piste qui risque de t'apporter plus de problèmes que de solutions, surtout si ton code fonctionne déjà en l'état

Je ne vois pas de requête ajax dans ton code, mais c'était juste une suggestion.
L'idée avec ajax était par exemple d'avoir le contenu des modals dans des fichiers externes chargés à la demande (lorsque l'utilisateur clique sur le bouton pour afficher une modal).
Sans utiliser ajax, pas sûr que ton approche avec javascript soit une bonne idée (mais c'est ton projet, tu codes bien ce que tu veux).

A priori, tu essayes de déplacer le contenu des tes modals depuis ton html vers ton javascript.
Tu va réduire ton code html mais en contrepartie tu vas surcharger ton javascript. Ca me semble ajouter beaucoup de complexité (avec risques d'erreurs) pour peu ou pas de bénéfice (ca ne me semble pas rendre le code "plus propre").

Ce n'est pas incorrect de stocker le contenu de tes modals dans une variable js mais ca me semble pas être une bonne solution pour maintenir et faire évoluer facilement ton code html.

A ta place, sans utiliser ajax, je conserverai la première version avec les multiples modals dans la page html.
Puisque tu utilises PHP, une autre suggestion pourrait être l'utilisation de include/require en PHP pour peut-être améliorer l'organisation de ton code, mais difficile de t'apporter une réponse plus concrète sans en savoir plus sur ton projet.

Multiple modal

Qui est en ligne