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

  1. #21
    Nouveau membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Avril 2006
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 78
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Avril 2006
    Messages : 64
    Points : 28
    Points
    28
    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...

  2. #22
    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 : 53
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    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

  3. #23
    Nouveau membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Avril 2006
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 78
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Avril 2006
    Messages : 64
    Points : 28
    Points
    28
    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à... ?

  4. #24
    Candidat au Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Janvier 2012
    Messages : 10
    Points : 3
    Points
    3
    Par défaut appel de cette fenetre jquery via php
    Bonjour,

    pardonnez moi de remonter ce post mais j'ai une question toute bête, y a t il un moyen de faire appel à cette fonction en php, j'aimerai l'utiliser pour confirmer une action après requete, je souhaiterai faire appel à cette fenêtre automatiquement via un code php mais je ne parviens pas à la traduire vu mon niveau très moyen en javascripts ?

    merci d'avance

  5. #25
    Membre régulier
    Homme Profil pro
    Inscrit en
    Octobre 2004
    Messages
    514
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2004
    Messages : 514
    Points : 107
    Points
    107
    Par défaut
    voilà une réponse juste après un teste d'une adresse en php avec jquery

    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
    $motif_adresse ='/^[a-z- ]{5,80}$/i';
    if(!preg_match($motif_adresse,$adresse))
    {
    	echo' <script>
        $(document).ready(function() {
        $("#dialog").dialog({ 
    	minWidth: 400 ,
    	height: 120,
    	position: [400,250],                      
    	buttons: { "Ok": function() { 
    	history.go();
        return false; { $(this).dialog("close"); } } }
      	});	});
        </script>';
    	echo'<div align="center" id="dialog" title="Erreur">Votre adresse est incorrect uniquement des lettres !!!!</div>';	
    	include("cssstyle/bas.php");
    	$add=0;	
    	return FALSE;			 
        }
    else{
    	$adresse;
        }

  6. #26
    Candidat au Club
    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
    Points : 4
    Points
    4
    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>

  7. #27
    Futur 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
    Points : 5
    Points
    5
    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

  8. #28
    Membre du Club
    Inscrit en
    Novembre 2008
    Messages
    122
    Détails du profil
    Informations forums :
    Inscription : Novembre 2008
    Messages : 122
    Points : 54
    Points
    54
    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 !!

  9. #29
    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
    Points : 4 835
    Points
    4 835
    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();
    }
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  10. #30
    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
    Points : 3
    Points
    3
    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

  11. #31
    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
    Points : 4 835
    Points
    4 835
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var rel =  $('#iddulien').attr('rel');
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  12. #32
    Membre à l'essai
    Inscrit en
    Juin 2011
    Messages
    10
    Détails du profil
    Informations forums :
    Inscription : Juin 2011
    Messages : 10
    Points : 11
    Points
    11
    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

  13. #33
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Juillet 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations forums :
    Inscription : Juillet 2012
    Messages : 1
    Points : 1
    Points
    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

  14. #34
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2008
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2008
    Messages : 9
    Points : 10
    Points
    10
    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>

  15. #35
    Candidat au Club
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 4
    Points : 3
    Points
    3
    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.

  16. #36
    Nouveau Candidat au Club
    Profil pro
    Inscrit en
    Août 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2012
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    Bien le bonjour, d'abord merci pour ce tuto qui est vraiment fort utile.

    J'ai mis en place un tableau alimenté par une base de données.
    J'aimerais que sur la sélection d'une cellule du tableau la modale s'ouvre et récupère les info de la cellule.

    Malheureusement je n'y arrive pas.... Vu que ce n'est pas une nouvelle fenetre windows et donc pas de rechargement de page, je n'arrive pas a faire passer ma variable :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="#?matri=<?php echo $donnees_messages['Nom'];?>" class="popup-light" data-popup-class="popup-block" data-popup-width="500px">
    Je pensais récupérer le "nom" puis via url, l'envoyer pour ensuite la récupérer en GET.

    Le but etant quand meme de ne pas recharger la page :/
    Donc une solution ? Ajax semble être le seul moyen non ?

  17. #37
    Nouveau membre du Club
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Octobre 2006
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Webmaster amateur

    Informations forums :
    Inscription : Octobre 2006
    Messages : 35
    Points : 25
    Points
    25
    Par défaut Pop-up qui apparait à l'ouverture de la page
    Bonjour,

    quant à moi j'aurais aimé que la pop-up s'ouvre à l'ouverture de ma page d'accueil pour donner des infos.
    je suis en développement d'un niveau assez rare qui est en dessous de très nul... j'ai donc essayé de façon basique de remplacer "display:none" par "display:block" sauf que la popup apparait décallée et je perds la croix pour fermer, et je n'ai pas le fond opaque...

    Bref, je suis perdu.

    Merci de vos lumières !!

  18. #38
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2011
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2011
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    @lorentdups Essaye de remplacer la fonction "click" par "fadeIn"

  19. #39
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2003
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2003
    Messages : 44
    Points : 19
    Points
    19
    Par défaut
    meme question pour l'ouverture automatique du pop up
    est ce que la solution exposé dans le message precedent est la seul ?


    merci

  20. #40
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2003
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2003
    Messages : 44
    Points : 19
    Points
    19
    Par défaut
    et 2eme probleme
    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 en conflit avec un script jquery deja en place sur ma page

    que puisje faire?

    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, 17h25
  2. Réponses: 3
    Dernier message: 07/09/2011, 13h28

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