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 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
| <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>
:coucou:
</body></html> |
Partager