新更新 UPDATES :
STILL IN PROCESS弹窗页面 (BT)
February 11, 2014
11 February 2014
WRITTEN BY CECELIA
事先声明哦，虽然代码都是一样的，可是！我可以教你美化到漂漂亮亮，样式较多。还有，请你有耐心地看完，做错一样东西都会很乱。
此教程仅本小姐，博主我有，不许转载，转载者，后果自负.
此教程仅本小姐，博主我有，不许转载，转载者，后果自负.
Blog Template
1. 到 EDIT HTML .
2. 按 ctrl+f ，寻找一下字眼 .
<head>
3. 在 <head> 的后面贴上以下代码 :
<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: 30px;
border: 15px solid #000000;
float: left;
font-size: 12px;
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>
解释
绿色字眼 : 框框的厚度/框类型/颜色
橘色字眼 : 字体的大小
紫色字眼 : 框框的弧度
海蓝字眼 : close图片的方向 换去 left/right
红色字眼 : 背景，后面那个～～如果不要它黑黑的，可以用以下的代码来代替.
海蓝字眼 : close图片的方向 换去 left/right
红色字眼 : 背景，后面那个～～如果不要它黑黑的，可以用以下的代码来代替.
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .0;
z-index: 9999;
}
黄色字眼： 透明度，0就透明，然后加着下去，越来越黑～
还没完！继续～～
4. save起来，然后到Add HTML/Javascript 那里 ，拷贝以下代码，贴下去
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></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="图片 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>
解释粉色字眼 : 图片的link
5. 然后，到你想放链接的地方贴以下的代码 ，然后保存起来。
<a class='poplight' href='#?w=500' rel='1'>页面的名称</a>
解释
紫色字眼 : 代号（很重要的啊）
蓝色字眼 : 页面名称
6. 然后回到 EDIT HTML ， ctrl+f 寻找 ：<body expr:class='"loading" + data:blog.mobileClass'> 接着拷贝以下的代码，贴进去。
6. 然后回到 EDIT HTML ， ctrl+f 寻找 ：<body expr:class='"loading" + data:blog.mobileClass'> 接着拷贝以下的代码，贴进去。
<div class='popup_block' id='1'>
内容在这里哦....
</div>
NEU
ALT
