mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
99 lines
3.4 KiB
HTML
99 lines
3.4 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
|
||
|
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||
|
|
||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||
|
<head>
|
||
|
<title>GreyBox Redux</title>
|
||
|
<script type="text/javascript" src="jquery-1.0.2.js"></script>
|
||
|
<script type="text/javascript" src="greybox.js"></script>
|
||
|
<link href="greybox.css" rel="stylesheet" type="text/css" media="all" />
|
||
|
<!-- This CSS supports only IE 5.5 +. The conditional below
|
||
|
just for the sake of brevity.
|
||
|
-->
|
||
|
<!--[if lt IE 7]>
|
||
|
<link href="ie-hacks.css" rel="stylesheet" type="text/css" media="all" />
|
||
|
<![endif]-->
|
||
|
<script type="text/javascript">
|
||
|
$(document).ready(function(){
|
||
|
var myCallback = function() {
|
||
|
alert('Callback on close');
|
||
|
}
|
||
|
|
||
|
$("a.greybox").click(function(){
|
||
|
var t = $(this).title() || $(this).text() || $(this).href();
|
||
|
$.GB_show($(this).href(), {
|
||
|
height: 400,
|
||
|
width: 400,
|
||
|
animation: false,
|
||
|
overlay_clickable: true,
|
||
|
caption: t
|
||
|
});
|
||
|
return false;
|
||
|
});
|
||
|
$("a.greybox_no").click(function(){
|
||
|
var t = $(this).title() || $(this).text() || $(this).href();
|
||
|
$.GB_show($(this).href(), {
|
||
|
height: 400,
|
||
|
width: 400,
|
||
|
animation: false,
|
||
|
overlay_clickable: false,
|
||
|
caption: t
|
||
|
});
|
||
|
return false;
|
||
|
});
|
||
|
$("a.greybox_ani").click(function(){
|
||
|
var t = $(this).title() || $(this).text() || $(this).href();
|
||
|
$.GB_show($(this).href(), {
|
||
|
height: 400,
|
||
|
width: 400,
|
||
|
animation: true,
|
||
|
overlay_clickable: true,
|
||
|
caption: t
|
||
|
});
|
||
|
return false;
|
||
|
});
|
||
|
$("a.greybox_no_cb").click(function(){
|
||
|
var t = $(this).title() || $(this).text() || $(this).href();
|
||
|
$.GB_show($(this).href(), {
|
||
|
height: 400,
|
||
|
width: 400,
|
||
|
animation: false,
|
||
|
overlay_clickable: false,
|
||
|
callback: myCallback,
|
||
|
caption: t
|
||
|
});
|
||
|
return false;
|
||
|
});
|
||
|
$("a.greybox_no_cb_of").click(function(){
|
||
|
var t = $(this).title() || $(this).text() || $(this).href();
|
||
|
$.GB_show($(this).href(), {
|
||
|
height: 400,
|
||
|
width: 400,
|
||
|
animation: false,
|
||
|
overlay_clickable: false,
|
||
|
overflow: "hidden",
|
||
|
callback: myCallback,
|
||
|
caption: t
|
||
|
});
|
||
|
return false;
|
||
|
});
|
||
|
});
|
||
|
</script>
|
||
|
</head>
|
||
|
<body>
|
||
|
<h1>Greybox Redux (Reworked)</h1>
|
||
|
|
||
|
<p>Reworked original greybox redux at
|
||
|
<a href="http://jquery.com/demo/grey/">http://jquery.com/demo/grey/</a></p>
|
||
|
|
||
|
<h2 id="headline">See it in action:</h2>
|
||
|
<ul>
|
||
|
<li><a href="http://google.com/" title="Google" class="greybox_no">Launch Google</a> (Overlay not clickable)</li>
|
||
|
<li><a href="http://yahoo.com/" title="Yahoo" class="greybox">Visit Yahoo</a> (Overlay clickable)</li>
|
||
|
<li><a href="http://msn.com/" class="greybox_ani">Microsoft would like a visit.</a> (overlay clickable, animated)</li>
|
||
|
<li><a href="http://jquery.com/" class="greybox_no_cb">jQuery Rocks!</a> (Overlay not-clickable, callback alert)</li>
|
||
|
<li><a href="http://jquery.com/" class="greybox_no_cb_of">jQuery Rocks!</a> (Overlay not-clickable, callback alert, firefox only: greybox overflow set to hidden)</li>
|
||
|
</ul>
|
||
|
</body>
|
||
|
</html>
|