1. 模板 → 修改 HTML
2. Ctrl+F 寻找代码 <style type="text/css">
3. 将以下代码添加在 <style type="text/css"> 的上面：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>4. Ctrl + F 寻找代码 </style>
<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 style="outline: none; background-color: #fff;" href="#" class="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>
5. 将以下代码添加在 </style> 的上面：
#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;
}
红色代码：页面的背景色
蓝色代码：页面边框代码
紫色代码：页面字体大小
注意：以下的步骤因每个人使用的 BS basecode 不一样，所以不方便告诉大家要将代码添加在那里。
6. 将以下的代码添加在你要小工具出现的地方：
7. 之后，将以下代码添加到 <body> / <body oncontextmenu='return false;'> 下面：<a class='poplight' href='#?w=500' rel='1'>页面名称 1</a>
<div class='popup_block' id='1'>内容在这里。</div>
红色代码：页面的代号（注：很重要）
紫色代码：页面的名称（显示在博客）
蓝色代码：页面里面的内容（可更改）
8. 预览一下，即可保存。
小解释
一、为什么我说页面的代号很重要？
当你要你某个页面出现某个内容时，页面的代号一定要一样。
就是说，rel='1' 的页面，会出现 <div class='popup_block' id='1'> 的内容。
当然，如果你不要用 '1' 来做代号，你也可以用其他的字，例如：a / b / c / girl / boy 等。
自己容易找就好。
二、如果你要添加多个页面时，就将 ⑦ 的代码拷贝多一次，po 在同一个地方，不过，你的 rel='1' 一定要换成另外一个代码，不然就会出现一样的内容。
例：
<center>
<a class='poplight' href='#?w=500' rel='cutie'>页面名称 1</a>
</center>
<center>
<a class='poplight' href='#?w=500' rel='beautiful'>页面名称 1</a>
</center>
---
<div class='popup_block' id='cutie'>
内容在这里。
</div>
<div class='popup_block' id='beautiful'>
内容在这里。
</div>
三、如果你要以图片的方式来取代页面的名称，就添加以下的代码：
<a class='poplight' href='#?w=500' rel='1'><img src="图片 url" /></a>
Extra knowledge
在 修改HTML 里面，一些代码是很正式的，跟我们平时添加的代码不一样哦、看以下的例子：
1. 分行 <br/>
2. 图片 <img src='图片 url'/>
相关文章：
Categories: Bii の語法筆記, BS 教程, 關於小工具, 關於頁面
这个和之前的那个有什么不同阿?
ReplyDelete没有不一样，不过这个是给 BS user 的，添加代码的位置不一样 ;))
Deleteby BII
有navigate教程？
ReplyDelete还是这个就是navigate？
-已回复-
Delete如果是坠落式页面是一样的吗？
ReplyDelete(-谢博主-)
其实添加代码的方法都一样的哦 ^^ 只是代码不一样罢了..
Delete