Bonjour Bonjour!
Cela faisait un petit moment que je n'etais pas repassé par là occupé à essayer de construire mon site. Je vous rassure, ca avance petit a petit garce a plein de petit bout de code ou autre que je chope a droite a gauche sur le net
Donc maintenant j'ai un petit souci concernant ma fanetre "popup video", que j'ai pu creer donc en reprenant et desabillant un bout de code trouve sur la page d'un genereux webmasteur
D'abord, mon problème, ensuite le code:
Pb: tout s'affiche bien quand je clic sur mon image lien, la video apparait en milieu d'écran, peut se lancer sans problème, Par contre.. quand je ferme la fenêtre "popup video", la fenêtre disparait bien mais la video semble continuer en arriere plan (toujours du son)
COmment faire pour que ma croix de fermeture coupe et la video et le chargement de celle-ci pour faire place propre pour une éventuelle autre video??
un lien pour essayer:
http://synergology.jp/trial3.html
Maintenant mon code:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Video Pop-up</title>
<style type="text/css">
body {
background: #FFF;
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
line-height: 1.8em;
min-width: 980px;
}
img {border: none;} /*supprime le contour eventuel autour image croix de femeture */
a {color: PURPLE;}
.container {width: 900px; margin: 0 auto; font-size: 1.2em; color: FUCHSIA;}
#content { background: #F3F3F3; float: left; width: 100%;}
/*------------------POPUPS------------------------*/
#fade { /*--COULEUR FOND AUTOUR POPUPS--*/
display: none;
background: YELLOW;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: .30;
z-index: 9999;
}
.popup_block{ /*--FENETRE POPUP--*/
display: none;
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -20px -20px 0 0;
width:50px;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
</head>
<body>
<div id="content">
<center><a href="#?w=500" rel="pop-ferra" class="poplight"><img src="http://www.leprogres.fr/fr/images/DA9F16BC-35D2-46FD-8E42-8C87B5DE37BE/LPR_03/jean-ferrat-jean-d-ardeche.jpg" id="ferra"/></a></center>
</div>
<!--POPUP START-->
<div id="pop-ferra" class="popup_block" style="display: none; width: 500px; margin-top: -359px; margin-left: -290px; ">
<iframe width="512" height="384" frameborder="0" marginheight ="0" marginwidth="0" scrolling ="no" src="http://www.ina.fr/video/embed/I00013436/1057927/d84a2c6679db51b8773d3668c98cddcc/512/384/0" ></iframe>
</div>
<!--END POPUP-->
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://betanews.com/wp-content/uploads/2012/03/close-button-300x300.jpg" class="btn_close" title="Fermer la fenetre" alt="Fermer""</a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the 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
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
</body></html>
Merciiiiii:love:
Cela faisait un petit moment que je n'etais pas repassé par là occupé à essayer de construire mon site. Je vous rassure, ca avance petit a petit garce a plein de petit bout de code ou autre que je chope a droite a gauche sur le net
Donc maintenant j'ai un petit souci concernant ma fanetre "popup video", que j'ai pu creer donc en reprenant et desabillant un bout de code trouve sur la page d'un genereux webmasteur
D'abord, mon problème, ensuite le code:
Pb: tout s'affiche bien quand je clic sur mon image lien, la video apparait en milieu d'écran, peut se lancer sans problème, Par contre.. quand je ferme la fenêtre "popup video", la fenêtre disparait bien mais la video semble continuer en arriere plan (toujours du son)
COmment faire pour que ma croix de fermeture coupe et la video et le chargement de celle-ci pour faire place propre pour une éventuelle autre video??
un lien pour essayer:
http://synergology.jp/trial3.html
Maintenant mon code:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Video Pop-up</title>
<style type="text/css">
body {
background: #FFF;
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
line-height: 1.8em;
min-width: 980px;
}
img {border: none;} /*supprime le contour eventuel autour image croix de femeture */
a {color: PURPLE;}
.container {width: 900px; margin: 0 auto; font-size: 1.2em; color: FUCHSIA;}
#content { background: #F3F3F3; float: left; width: 100%;}
/*------------------POPUPS------------------------*/
#fade { /*--COULEUR FOND AUTOUR POPUPS--*/
display: none;
background: YELLOW;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: .30;
z-index: 9999;
}
.popup_block{ /*--FENETRE POPUP--*/
display: none;
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -20px -20px 0 0;
width:50px;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
</head>
<body>
<div id="content">
<center><a href="#?w=500" rel="pop-ferra" class="poplight"><img src="http://www.leprogres.fr/fr/images/DA9F16BC-35D2-46FD-8E42-8C87B5DE37BE/LPR_03/jean-ferrat-jean-d-ardeche.jpg" id="ferra"/></a></center>
</div>
<!--POPUP START-->
<div id="pop-ferra" class="popup_block" style="display: none; width: 500px; margin-top: -359px; margin-left: -290px; ">
<iframe width="512" height="384" frameborder="0" marginheight ="0" marginwidth="0" scrolling ="no" src="http://www.ina.fr/video/embed/I00013436/1057927/d84a2c6679db51b8773d3668c98cddcc/512/384/0" ></iframe>
</div>
<!--END POPUP-->
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://betanews.com/wp-content/uploads/2012/03/close-button-300x300.jpg" class="btn_close" title="Fermer la fenetre" alt="Fermer""</a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the 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
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
</body></html>
Merciiiiii:love:
Dernière édition:
