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

Publications (X)HTML et CSS Discussion :

Créer une fenêtre modale avec CSS 3


Sujet :

Publications (X)HTML et CSS

  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 : 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 416
    Points
    91 416
    Billets dans le blog
    20
    Par défaut Créer une fenêtre modale avec CSS 3


    Je vous propose un article permettant de créer une fenêtre modale uniquement en CSS 3 : Créer une fenêtre modale avec CSS 3.

    Jusqu'à présent, seul JavaScript permettait de réaliser ce type de fenêtre, mais CSS 3 apporte des fonctionnalités suffisantes pour gérer cela correctement.

    Créer une fenêtre modale avec CSS 3.

    Bien entendu, n'hésitez pas à faire part de vos remarques et commentaires voire des suggestions d'amélioration ou d'autres méthodes.
    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
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    Super article
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  3. #3
    Membre confirmé Avatar de jimmypage
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2006
    Messages
    314
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France

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

    Informations forums :
    Inscription : Novembre 2006
    Messages : 314
    Points : 474
    Points
    474
    Par défaut
    clair, concis, .. Merci pour cet article !

  4. #4
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Mai 2011
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2011
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    J'ai trouvé cet article très bien donc je l'ai mis en application.
    mais lors des essais, petit problème:
    dans mon fichier j'ai 3 fenêtres popup en javascript
    j'ai donc remplacé le code en mettant en place les fenêtres modales.
    Mais quand j'ai cliqué sur le 1er lien -> résultat ok
    quand j'ai cliqué sur le 2éme -> affichage du 1er lien
    idem pour le 3éme lien.

    j'ai pris l'exemple de l'article, j'ai doublés les routines avec target et button et j'ai changé le texte entre les balises <p></p> pour identifier les positions "target 1" "target 2" idem avec "bouton 1" "bouton2"
    quand j'ai cliqué sur le 1er lien target, il m"affiche bien target 1 mais quand je clique sur le 2éme lien target, il m'affiche encore target 1 alors qu'il devrait m'afficher target 2.
    idem avec les commandes bouton.

    conclusion, il semblerait que l'on ne peut utiliser cette routine qu'une fois par fichier.
    une fois le lien target et une fois le lien button

    Code html : 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
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>Modalbox CSS</title>
    	<style>
                    h1{
                            text-align: center;
                    }
                    #modalCheck{
                            display: none;
                    }
                    .modalLayer{
                            display: none;
                            position: fixed;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            background-color: rgba(0, 0, 0, 0.5);
                    }
                    #modalCheck:checked + .modalLayer, #modalContent:target{
                            display: block;
                    }
                    .popup_block{
                            background: #fff;
                            padding: 20px;
                            border: 20px solid #ddd;
                            position: relative;
                            margin: 10% auto;
                            width: 40%;
                            box-shadow: 0px 0px 20px #000;
                            border-radius: 10px;
                    }
                    img.btn_close {
                            float: right;
                            margin: -55px -55px 0 0;
                            cursor: pointer;
                    }
                    .button{
                            cursor: pointer;
                            color: blue;
                            text-decoration: underline;
                    }
            </style>
    </head>
    <body>
    	<h1>Une Modalbox CSS</h1>
    	<h2>Méthode <kbd>:target 1</kbd></h2>
    	<p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #1</p>
    	<div>
    		<a href="#modalContent">Voir la fenêtre modale</a>
    		<div class="modalLayer" id="modalContent">
    			<div class="popup_block">
    				<a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></a>
    				<img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif">
    				<h2>Popup #1</h2>
     
    				<p>Fenêtre modale 1. </p>
    				<p>avec un target.</p>
     
    			</div>
    		</div>
    	</div>
     
    	<h2>Méthode <kbd>:target 2</kbd></h2>
    	<p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #1</p>
    	<div>
    		<a href="#modalContent">Voir la fenêtre modale</a>
    		<div class="modalLayer" id="modalContent">
    			<div class="popup_block">
    				<a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></a>
    				<img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif">
    				<h2>Popup #1</h2>
     
    				<p>Fenêtre modale 2. </p>
    				<p>avec un target.</p>
     
    			</div>
    		</div>
    	</div>
     
    	<h2>Méthode <kbd>:checked 1</kbd></h2>
    	<p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #2</p>
    	<div>
    		<label class="button" for="modalCheck">Voir la fenêtre modale</label>
    		<input type="checkbox" id="modalCheck" />
    		<div class="modalLayer">
    			<div class="popup_block">
    				<label for="modalCheck"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></label>
    				<img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif">
    				<h2>Popup #2</h2>
     
    				<p>Fenêtre modale 1. </p>
    				<p>avec un bouton.</p>
     
    			</div>
    		</div>
    	</div>
     
    	<h2>Méthode <kbd>:checked 2</kbd></h2>
    	<p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #2</p>
    	<div>
    		<label class="button" for="modalCheck">Voir la fenêtre modale</label>
    		<input type="checkbox" id="modalCheck" />
    		<div class="modalLayer">
    			<div class="popup_block">
    				<label for="modalCheck"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></label>
    				<img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif">
    				<h2>Popup #2</h2>
     
    				<p>Fenêtre modale 2. </p>
    				<p>avec un bouton.</p>
     
    			</div>
    		</div>
    	</div>
    </body>
    </html>

  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 : 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 416
    Points
    91 416
    Billets dans le blog
    20
    Par défaut
    Un id doit être unique dans la page !

    Regarde bien les différents codes de l'article, les id sont incrémentés à chaque nouvel exemple.
    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
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Bravo!! Très bon article, très accessible et toujours aussi pédagogue.

    Je suis toujours impressionné par la capacité de faire passer un message clairement et simplement.

    Les étapes sont très claires et j'ai pris du plaisir à lire les parties que je maitrise (c'est toujours bon de réviser les bases ).

    L'esprit de ce forum est agréable et jusqu'à présent je n'ai eu que des satisfactions.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  7. #7
    Candidat au Club
    Profil pro
    Inscrit en
    Août 2009
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 2
    Points : 2
    Points
    2
    Par défaut Information positionnement CSS
    Bonjour ,

    Je souhaite déjà dire que ce code est super ,mais j'ai un petit problème de placement et je pense que c'est due as un Éléments style Nom : pb css.jpg
Affichages : 1959
Taille : 107,1 Ko avez vous une idée de ce que je doit mettre en œuvre pour solutionné le problème en vous remerciant cordialement
    Perché Michael

  8. #8
    Candidat au Club
    Profil pro
    Inscrit en
    Août 2009
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 2
    Points : 2
    Points
    2
    Par défaut Merci
    Je doit apprendre a mieux lire j'ai résolue mon souci est devinée c'était mes ID qui était mal renseigné .

Discussions similaires

  1. Réponses: 66
    Dernier message: 09/06/2015, 01h17
  2. [CSS 3] Créer une fenêtre modale avec CSS 3
    Par Bovino dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 07/12/2012, 11h21

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