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

jQuery Discussion :

[Article] Créez une fenêtre modale avec CSS et jQuery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut [Article] Créez une fenêtre modale avec CSS et jQuery
    Bonjour,

    Je vous propose une traduction de l'article anglophone de Soh Tanaka : CSS Lightview Style Popup.

    Soh, tout au long de cet article, vous présente une méthode permettant de créer une popup CSS du même style que celles utilisées par la bibliothèque Lightview. Cette méthode utilise du CSS et un peu de JavaScript.

    N'hésitez pas à nous faire part de vos questions/suggestions

    Mise à jour du 10/02/2013 : la bibliothèque jQuery ayant beaucoup évolué depuis l'écriture de cet article, une mise à jour du code a été effectuée pour le rendre compatible avec les versions récentes de jQuery.

    Créez une fenêtre modale avec CSS et jQuery.

    Bonne lecture !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre confirmé
    Homme Profil pro
    Ingénieur qualité méthodes
    Inscrit en
    Avril 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Ingénieur qualité méthodes
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2011
    Messages : 48
    Par défaut
    Salut,

    J'ai tester chez moi et apparemment ça ne fonctionne pas..
    Pas d'opacité ni de bouton close

    J'ai chargé jQuery à partir de Google
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    entre les balises J'ai essayé sous ie9, chrome et ff4..

    Des idées?

    Merci Bilou

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Des idées?
    Dans la mesure ou la page d'exemple fonctionne très bien sous FF, IE, Chrome, Opera et Safari et comme il semble que mon chat rechigne à se laisser éventrer pour que je puisse essayer de deviner ton code dans ses entrailles, la réponse simple à ta question simple est : non, pas d'idée...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Membre confirmé
    Homme Profil pro
    Ingénieur qualité méthodes
    Inscrit en
    Avril 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Ingénieur qualité méthodes
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2011
    Messages : 48
    Par défaut
    Et bien j'ai fait un copier/coller du tuto
    ->Structure HTML
    ->Mise en forme CSS
    ->Mise en place du jQuery

    J'ai mis le code jQuery entre de nouvelles balises <script></script> dans le <head></head>
    Je ne comprends pas ce que j'ai mal fait..

    Tant pis
    Merci

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Ben de deux choses l'une, soit lorsque tu testes la page d'exemple (http://sohtanaka.developpez.com/tuto...uery/fichiers/) ça ne fonctionne pas chez toi et dans ce cas, tu ferais bien de faire désenvouter ton PC, soit ça fonctionne et dans ce cas, c'est ton code qui est problématique et il nous sera impossible de te dire pourquoi sans le voir...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  6. #6
    Membre confirmé
    Homme Profil pro
    Ingénieur qualité méthodes
    Inscrit en
    Avril 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Ingénieur qualité méthodes
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2011
    Messages : 48
    Par défaut
    Ok je vais voir du côté du code

    Super article en tout cas!

  7. #7
    Nouveau candidat au Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Mai 2012
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Mai 2012
    Messages : 2
    Par défaut
    +1
    La fenêtre est magnifique !! J'aimerai beaucoup la lancer aussi au chargement de la page , avec une condition php if , mais ça ...

    J'aimerai tromper le script pour qu'il traite directement rel + width , pour le width , pas de problème , mais j'arrive pas pour le rel !!

    QQ1 aurait il une idée soit pour simuler un click avec les attribut nécessaire a la fenetre ?? ou la lancer directement ??

    merci

  8. #8
    Membre averti
    Homme Profil pro
    Inscrit en
    Juillet 2011
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Juillet 2011
    Messages : 24
    Par défaut Avec base de données
    Bonjour,

    Pourriez-vous me diriger vers une solution qui permet en cliquant sur un lien du style informationsuser.php?id_user=$_GET[id_user] et que la fenetre modale puisse aller récupérer les informations dans la base de données à partir de l'id_user ?



    Merci beaucoup

  9. #9
    GTi
    GTi est déconnecté
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 24
    Par défaut
    merci pour cette traduction, mais j'aimerais faire en sorte que la fenetre modale s'ouvre tout seule à l'ouverture de ma page d'accueil.

    Il doit juste falloir ajouter un petit bout de code mais mon niveau est encore bien trop faible même pour ça.

    Merci d'avance

  10. #10
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Avril 2006
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Avril 2006
    Messages : 64
    Par défaut réglage fadeIn, fadeOut
    Bonjour,
    je ne connais pas grand chose au codage.
    Je cherche la possibilité de régler la vitesse du fade dans les 2 sens...
    J'ai bien vu dans mes recherche sur le Net qu'on peut introduire un slow quelque part, mais je n'ai pas compris comment.

    Une piste ? Merci pour les aides à venir...

  11. #11
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Il suffit de lire la doc de .fadeIn() et .fadeOut().
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  12. #12
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Avril 2006
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Avril 2006
    Messages : 64
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Il suffit de lire la doc de .fadeIn() et .fadeOut().
    Oui, d'accord, mais je dois attaquer dans le jquery-1.6.4.min.js...?
    Ca va être un carnage !!! (vu mon niveau en codage)

    Surtout que dans ce fichier, il n'y a que :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}
    Ca doit pas être là... ?

  13. #13
    Membre habitué
    Inscrit en
    Juin 2011
    Messages
    10
    Détails du profil
    Informations forums :
    Inscription : Juin 2011
    Messages : 10
    Par défaut popin
    Très bien ce tuto, pourtant il manque au moins une info...
    Traducttion signifie autre langue...
    Mes sites sont multilangues, et donc le contenu est dynamique, puisque la valeurs des variables est en fonction de la langue du visiteur !
    Depuis deux semaine je cherche comment passer par des variables pour la rédaction du contenu de la popin.
    par exemple le contenu de la div

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div id="popup1" class="popup_block">
     	<?php echo $tpop1[$num]  ?>	
    	<?php echo $cpop1[$num]  ?>
    	<?php echo $cpop2[$num]  ?>
    </div>
    Comment signifier la valeur de $num ?
    Ou bien comment récupérer ces valeurs directement dans la base de données, telles sont les deux questions dont je n'ai encore pas trouvé de réponse...
    Si quelqu'un peut m'aider, je lui en serais gré...

    Dans les pistes, j'ai compris que l'on peut passer des argument ainsi :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="#?w=500" rel="popup1" argument ="test variable" class="poplight" onclick="blabla");  >
    et ajouter une variable dans la fonction :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var popArgument = $(this).attr('argument'); //Ajout d'un argument
    Je bloque sur la façon de relier une valeur de variable au contenu de la div de référence pour le contenu de la popin !
    Merci de votre aide
    Claude

  14. #14
    Invité de passage
    Homme Profil pro
    Inscrit en
    Juillet 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations forums :
    Inscription : Juillet 2012
    Messages : 1
    Par défaut
    bonjour et bravo pour se tuto sa fonctionne très bien en html mais mon problème comment faire pour l’ouvrir via un bouton en flash en action script 2 ? car mon site est en full flash

  15. #15
    Membre à l'essai
    Femme Profil pro
    Inscrit en
    Janvier 2012
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Janvier 2012
    Messages : 5
    Par défaut exécution une seule fois
    Bonjour,
    tout est fonctionnel, mais le Pop Up ne s'affiche qu'une seule fois.

    Quelqu'un a une idée, merci !!

    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
     
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script language="javascript">
    		$(document).ready(function() {
    //Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
    $('a.poplight[href^=#]').click(function() {
    	var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
    	var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
     
    	//Récupérer les variables depuis le lien
    	var query= popURL.split('?');
    	var dim= query[1].split('&');
    	var popWidth = dim[0].split('=')[1]; //La première valeur du lien
     
    	//Faire apparaitre la pop-up et ajouter le bouton de fermeture
    	$('#' + popID).fadeIn().css({
    		'width': Number(popWidth)
    	})
    	.prepend('');
     
    	//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
    	var popMargTop = ($('#' + popID).height() + 80) / 2;
    	var popMargLeft = ($('#' + popID).width() + 80) / 2;
     
    	//On affecte le margin
    	$('#' + popID).css({
    		'margin-top' : -popMargTop,
    		'margin-left' : -popMargLeft
    	});
     
    	//Effet fade-in du fond opaque
    	$('body').append(''); //Ajout du fond opaque noir
    	//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
    	$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
     
    	return false;
    });
     
    //Fermeture de la pop-up et du fond
    $('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
    	$('#fade , .popup_block').fadeOut(function() {
    		$('#fade, a.close').remove();  //...ils disparaissent ensemble
    	});
    	return false;
    });
    		});
     
        </script>

  16. #16
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    6
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 6
    Par défaut
    Bonjour,

    J'ai inséré un formulaire dans la fenêtre modale mais au click sur le bouton submit, celle-ci se ferme automatiquement...

    Y aurait-il un moyen de bloquer cette fermeture automatique?

    Merci d'avance

  17. #17
    Membre confirmé
    Inscrit en
    Novembre 2008
    Messages
    122
    Détails du profil
    Informations forums :
    Inscription : Novembre 2008
    Messages : 122
    Par défaut intégration php et validation de formulaire (pop-up)
    Bonjour,

    J'aimerais intégrer le code dans l'action de ma form "formulaire.php"

    je m'explique j'ai un formulaire avec un script de validation pour chaque champs.

    Quand j'ajoute le script au boutton submit de mon formulaire, la fenètre modal s'affiche avant d'effectuer le traitement (validation + envoie), d'ou la raison de vouloir ecrire le code dans mon fichier formulaire.php (je ne sais s'il y a d'autres solutions pour n'afficher la fenetre qu'après l'exécution du script de validation et l'envoie du formulaire)


    Je vous remercie d'avance pour votre aide !!

  18. #18
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    Bonjour , votre script de validation doit renvoyer true ou false pour indiquer si les champs de formulaire sont correctement remplit ?

    si oui :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    if(testdeschampsFonction()){
    ouvrirPopup();
    }

  19. #19
    Membre régulier
    Profil pro
    Inscrit en
    Avril 2008
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2008
    Messages : 9
    Par défaut
    edit : souci résolue
    comme je voulais ma popup dès le chargement de celle ci et j'avais un problème de clic dans la fenêtre modal
    alors je suis partit sur du plus simple

    par contre on doit dans le css mettre une largeur à la fenêtre modale ainsi que joué avec les pourcentage pour le centrage
    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
     
    <div class="voile-noir">
    <div id="popup_name" class="popup_block">
      <object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/b0fo-Uqx2xk?version=3&amp;hl=fr_FR&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b0fo-Uqx2xk?version=3&amp;hl=fr_FR&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object><div style="float:right"><h1>Nouvelle page</h1>
      <p>Le contenu de cette page reste a saisir...</p>
      <p><a href="un_lien.html"><u>Renseignements et r&eacute;servations.</u></a>  <br /></p></div>
        <center>
        <input type="submit" value="SKIP" class="close" />
        </center>
    <script type="text/javascript">
     
    $(document).ready(function() {
      //Fermeture de la pop-up et du fond
    $('.close').live('click', function() { //Au clic sur le bouton ou sur le calque...
      $('.voile-noir ').fadeOut(function() {
        $('.voile-noir,.popup_block').remove();  //...ils disparaissent ensemble
      });
      return false;
    });
    });
    </script> 
     <a href="#" class="close">close</a>
    </div> </div>

  20. #20
    Futur Membre du Club
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 4
    Par défaut
    Bonjour à tous.

    Le seul problème que je rencontre est le scroll; en effet, ma fenêtre modal n'est pas scrollable et le scroll à la souris fait scroller la page en arrière plan.

    Résultat: le contenu de la fenêtre est coupé, alors que l'on devrait (selon moi) voir la partie haute et pouvoir scroller ensuite.

    Comment corriger cela ?

    Merci.

Discussions similaires

  1. [Article] Créer une fenêtre modale avec CSS 3
    Par Bovino dans le forum Publications (X)HTML et CSS
    Réponses: 7
    Dernier message: 24/02/2018, 16h25
  2. Réponses: 3
    Dernier message: 07/09/2011, 12h28

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