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
| <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body{
font:1em/1.2 Verdana, sans-serif;
padding:0 10px;
}
#main {
max-width:60em;
margin:auto;
}
h1, h2, h3 {
font-size:1.5em;
color: #069;
text-shadow: 1px 1px 0px #fff;
}
</style>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function() {
$('#btn_cde').on('click', function() {
$('#inline_content').empty();
$('#inline_content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</p>');
$.colorbox({
inline: true,
width: "50%",
href: "#inline_content"
})
});
});
</script>
</head>
<body>
<div id="main">
<h1>Exemple création dynamique</h1>
<p><button id="btn_cde">Création contenu</button>
Simulation d'un retour Ajax</p>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
</div>
</div>
</div>
</body></html> |
Partager