J'ai créé une page bidon afin de faire fonctionner un pop-up ( pour ensuite la réutiliser dans un site)
MAIS ÉVIDEMMENT, ça ne fonctionne pas, c'est pourquoi je me tourne vers vous.
Avez vous une idée d l'erreur qu'il pourrait y avoir dans mon code?
(je ne pense pas que ce soit un problème de lien car le background color yellow fonctionne bien)
(j'ai essayé de mettre le script dans le head et aussi dans le fond, mais rien à faire)
HTML
- Code: Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<title>testx</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css"/>
<script type="text/javascript">
jQuery(function($){
//Lorsque vous cliquez sur un lien de la classe poplight
$('a.poplight').on('click', function() {
var popID = $(this).data('rel'); //Trouver la pop-up correspondante
var popWidth = $(this).data('width'); //Trouver la largeur
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
//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;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
//Close Popups and Fade Layer
$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //...ils disparaissent ensemble
return false;
});
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<a href="#" data-width="500" data-rel="popup1" class="poplight">Voir la pop-up - Width = 500px</a>
<div id="popup_name" class="popup_block">
<h2>CA FONCTIONNE?</h2>
<p> BLABLA BIDON BIDON BIDON</p>
</div>
</body>
</html>
CODE CSS
- Code: Tout sélectionner
body{
background-color: yellow;
}
#fade { /*--Masque opaque noir de fond--*/
display: none; /*--masqué par défaut--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--masqué par défaut--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--Les différentes définitions de Box Shadow en CSS3--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--Coins arrondis en CSS3--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
SitemapIndex
Flux RSS