Ik ben bezig met een website te maken, maar nu wil ik zoiets maken dat als je me website in je browser typt en op enter drukt dat je dan gelijk een soort van lightbox ziet met een plaatje erin en dat je die moet weg klikken om verder te kijken op mijn website. Weet iemand hier mischien een stukje script voor of een tutorial.
Zelf had ik al een soort gelijke tutorial gevonden maar het probleem hier is dat je eerst op een link moet klikken voor dat de light box word geopend zie code hieronder.
Alvast bedankt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$(function() {
$( "#dialog" ).dialog();
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
});
</script>
<style>
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
width:375px;
height:203px;
}
</style>
</head>
<body>
<ul>
<li><a href="#dialog" name="modal">Simple Window Modal</a></li>
<div id="boxes">
<div id="dialog" class="window">
Simple Modal Window |
<a href="#"class="close"/>Close it</a>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
</div>
</body>
</html>