Affichage d'une popup en 1er plan

Sujet résolu

10 novembre 2010 à 9:42:17

Bonjour tout le monde,

J'ai besoin de savoir si vous connaissez une méthode pour réaliser un popup qui s'affiche en 1er sur un site telque dans ce site : http://www.bingofr.com/

Merci bien pour toute réponse

atuna6

10 novembre 2010 à 10:05:28

Bonjour,

Je te propose d'utiliser JQuery :
http://yensdesign.com/2008/09/how-to-c [...] using-jquery/

Si tu ne connais pas encore JQuery, il y a un très bon tuto sur le site du zéro

GeoffreyZéro

10 novembre 2010 à 11:05:45

Ce serait vraiment dommage d'importer une librairie de plus de 5000 lignes alors que le code minimal tient sur 30.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>pop up</title>
<style type="text/css">
html, body
{
min-height: 100%;
}

#layer
{
z-index: 100;
position: absolute;
top: 0px; left: 0px;
background: black;
filter: alpha(opacity=70);
-webkit-opacity: 0.7;
-moz-opacity: 0.7;
opacity: 0.7;  
height: 100%;
width: 100%;
}
#popup
{
z-index:1001;
position: absolute;
top: 50%;
left: 50%;
background: white;
-moz-box-shadow: 10px 10px 20px #222222;
-webkit-box-shadow: 10px 10px 20px #222222;
box-shadow: 10px 10px 20px #222222;
width: 200px;
height: 350px;
margin-top: -175px;
margin-left: -100px;
}

#popup p, h2
{
margin: 20px;
}
#fermer
{
position: absolute;
top: -10px;
right: -10px;
height: 30px; width: 30px;
background: gray;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
color: white;
border: none;
font-weight: bold;
cursor: pointer;
}
#fermer:hover
{
background: black;
}
</style>
</head>
<body>

<div>
  <input type="button" value="clic clic ! "/>
</div>
<script type="text/javascript">
<!--
document.getElementsByTagName("input")[0].onclick=function(){

  // on crée les éléments
  var layer = document.createElement('div');
  var popup = document.createElement('div');
  var titre = document.createElement('h2');
  var titre_text = document.createTextNode("Lorem ipsum");
  var contenu = document.createElement('p');
  var contenu_text = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."); 
  var fermer = document.createElement('input');
  fermer.setAttribute("type", "button");
  fermer.setAttribute("value", "X");
  
  //on donne des id pour faire fonctionner le CSS
  layer.id= "layer";
  popup.id="popup";
  fermer.id= "fermer";
  
  // on insère les éléments les uns dans les autres
  popup.appendChild(titre);
  titre.appendChild(titre_text);
  popup.appendChild(contenu);
  contenu.appendChild(contenu_text);
  popup.appendChild(fermer);
  document.body.appendChild(layer);
  document.body.appendChild(popup);	
  
  // on donne un comportement au bouton
  fermer.onclick=function(){document.body.removeChild(layer); document.body.removeChild(popup);}
}
//-->
</script>

</body>
</html>

atuna6

10 novembre 2010 à 11:10:53

Après tout dépend de l'effet que tu souhaites donner ...
JQuery te permettra d'ajouter des effets de fondu ou autres

Shivaan

10 novembre 2010 à 11:39:18

Dites ! Vous pensez vraiment que c'est l'endroit pour débuter un tel débat ?
Merci de revenir au problème initial.

Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

atuna6

10 novembre 2010 à 11:42:28

euh pour moi c'était pas hors sujet que de parler des avantages et inconvénients de chaque technique qui peuvent aider l'auteur du sujet à opter pour l'une ou l'autre des solutions (compatibilité avec les navigateurs, rapidité, ...) selon ses contraintes

GeoffreyZéro

10 novembre 2010 à 11:45:06

Tu n'y vas pas un peu fort là ? On propose chacun une solution et une argumentation. Si tu as besoin de te défouler prend un caramel et mâche fort.

edit : par contre j'aurais pu dire ça par MP

Shivaan

10 novembre 2010 à 12:03:17

Non, je n'y vais pas fort. Vous assommez l'OP avec une rhétorique qui au final ne l'aide pas dans la résolution de son problème. Alors vous pouvez proposer vos solutions, mais je ne vois aucun intérêt à se lancer dans un débat "JQuery contre code brut".

De plus, je pense avoir été diplomate. Et vous encourage vivement à faire de même envers moi. Le fait que vous ne soyez pas d'accord avec mes méthodes ne vous autorise pas pour autant à me manquer de respect.

Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

amira1107

10 novembre 2010 à 12:04:49

Merci à vous pour toutes vos réponses, mais j'ai trouvé ce que je voulais dans ce lien là :

http://yensdesign.com/2008/09/how-to-c [...] using-jquery/

Merci atuna6

A bientôt