probleme avec la creation d'une popup

Voir le sujet précédent Voir le sujet suivant Aller en bas

probleme avec la creation d'une popup

Message par aminetigh le Mar 5 Sep 2017 - 11:11

je veux créer une pop up pour mon forum ,j'ai trouvé ce code mais ,je veux que la popup s'ouvre automatiquement lors le chargement de la page ,sans cliquer sur le button
merci
voici le code :

Code:

<!-- Fenêtre « Modal responsive » en pure CSS -->
<!-- **************************************** -->
<style>
/* CSS */
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
 
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.oModal:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.oModal > div h2 {
  margin:0;
}
 
.oModal > div .btn {
  float:right;
}
 
.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
}
</style>
 
<!-- HTML -->
 
<div id="oModal" class="oModal">
  <div>
    <header>
      <a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
       <h2>Exemple de fenêtre « modal » stylisée </h2>
     </header>
     <section>
      <p>Description du message. </p>
     </section>
     <footer class="cf">
      <a href="#fermer" class="btn droite" title="Fermer la fenêtre">Fermer</a>
     </footer>
  </div>
</div>
 
<a href="#oModal">Ouvrir le popup</a>

aminetigh
Nouveau membre

Messages : 16
Inscrit(e) le : 28/04/2010

http://sba-medecine.medecinalgerie.com
aminetigh a été remercié(e) par l'auteur de ce sujet.

Re: probleme avec la creation d'une popup

Message par Masterkamilo le Mar 5 Sep 2017 - 12:36

Bonjour,

Essaie d'ajouter ce script à la fin de ton code :

Code:
<script type="text/javascript>location.href = "#oModal";</script>

Ce qui donne :

Code:
 
<!-- Fenêtre « Modal responsive » en pure CSS -->
<!-- **************************************** -->
<style>
/* CSS */
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
 
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.oModal:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.oModal > div h2 {
  margin:0;
}
 
.oModal > div .btn {
  float:right;
}
 
.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
}
</style>
 
<!-- HTML -->
 
<div id="oModal" class="oModal">
  <div>
    <header>
      <a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
      <h2>Exemple de fenêtre « modal » stylisée </h2>
    </header>
    <section>
      <p>Description du message. </p>
    </section>
    <footer class="cf">
      <a href="#fermer" class="btn droite" title="Fermer la fenêtre">Fermer</a>
    </footer>
  </div>
</div>
 
<a href="#oModal">Ouvrir le popup</a>
<script type="text/javascript>location.href = "#oModal";</script>

Masterkamilo
**

Masculin
Messages : 80
Inscrit(e) le : 18/10/2011

http://republique.superforum.fr
Masterkamilo a été remercié(e) par l'auteur de ce sujet.

Re: probleme avec la creation d'une popup

Message par aminetigh le Mar 5 Sep 2017 - 12:50

non résolu 

aminetigh
Nouveau membre

Messages : 16
Inscrit(e) le : 28/04/2010

http://sba-medecine.medecinalgerie.com
aminetigh a été remercié(e) par l'auteur de ce sujet.

Re: probleme avec la creation d'une popup

Message par Chacha le Mar 5 Sep 2017 - 12:54

Message par Masterkamilo Aujourd'hui à 12:36
Message par aminetigh Aujourd'hui à 12:50

Bonjour,

Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné.

Je vous invite à lire :
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 54610
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Re: probleme avec la creation d'une popup

Message par aminetigh le Mer 6 Sep 2017 - 11:02

up

aminetigh
Nouveau membre

Messages : 16
Inscrit(e) le : 28/04/2010

http://sba-medecine.medecinalgerie.com
aminetigh a été remercié(e) par l'auteur de ce sujet.

Re: probleme avec la creation d'une popup

Message par aminetigh le Dim 10 Sep 2017 - 14:53

up

aminetigh
Nouveau membre

Messages : 16
Inscrit(e) le : 28/04/2010

http://sba-medecine.medecinalgerie.com
aminetigh a été remercié(e) par l'auteur de ce sujet.

Re: probleme avec la creation d'une popup

Message par Chacha le Lun 18 Sep 2017 - 10:07

Bonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 54610
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum