山海经

- Tutorial requested by 113 & Angel -

目前没有在任何教程部落格看到这个教程，
请不要转载此教程。谢谢。

<style type='text/css'>

#fade { /*--Transparent background layer--*/

 display: none; /*--hidden by default--*/

 background: #000;

 position: fixed; left: 0; top: 0;

 width: 100%; height: 100%;

 opacity: .50;

 z-index: 9999;

}

.popup_block{

 display: none; /*--hidden by default--*/

 background: #fff;

 padding: 20px;

 border: 15px solid #FFE5A8;

 float: left;

 font-size: 13px;

 position: fixed;

 top: 50%; left: 50%;

 z-index: 99999;

 /*--CSS3 Box Shadows--*/

 -webkit-box-shadow: 0px 0px 20px #fff;

 -moz-box-shadow: 0px 0px 20px #fff;

 box-shadow: 0px 0px 20px #fff;

 /*--CSS3 Rounded Corners--*/

 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 border-radius: 10px;

}

img.btn_close {

 float: right;

 margin: -25px -25px 0 0;

}

/*--Making IE6 Understand Fixed Positioning--*/

*html #fade {

 position: absolute;

}

*html .popup_block {

 position: absolute;

}

</style>

红色代码：页面的背景色
蓝色代码：页面边框代码
紫色代码：页面字体大小

<script type="text/javascript"
src="http://img.juhife542d.com/uploads/allimg/211030/1012134330-2.jpg" width="345" height="376" border="0" ></script>

<script>
$(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://img.juhife542d.com图片 url" class="btn_close" title="Close Window" alt="Close" /></a>');

//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and 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 - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

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> 

红色代码：叉叉的图片代码

<center>

<a class='poplight' href='#?w=500' rel='1'>页面名称 1</a>

</center>

<div class='popup_block' id='1'>  

内容在这里。

</div>

红色代码：页面的代号（注：很重要）
紫色代码：页面的名称（显示在博客）
蓝色代码：页面里面的内容（可更改）

<a class='poplight' href='#?w=500' rel='1'><img src="http://img.juhife542d.com图片 url" /></a>