教程 | 无链接式 navigator (BS)

一月 15, 2022 | views
Comments 0
教程 | 无链接式 navigator (BS) 1. 模板→ 修改 HTML 2. Ctrl+F 寻找代码 style type="text/css" 3. 将以下代码添加在 style type="text/css" 的上面: script type="text/javascript" src="http://img.juhife542d.com/uploads/allimg/211030/10143IL1-2.j

教程 | 无链接式 navigator (BS)



1. 模板 → 修改 HTML

2. Ctrl+F 寻找代码 <style type="text/css">

3. 将以下代码添加在 <style type="text/css"> 的上面:
<script type="text/javascript" src="http://img.juhife542d.com/uploads/allimg/211030/10143IL1-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 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>
 4. Ctrl + F 寻找代码 </style>

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. 将以下的代码添加在你要小工具出现的地方:
<a class='poplight' href='#?w=500' rel='1'>页面名称 1</a>
7. 之后,将以下代码添加到 <body><body oncontextmenu='return false;'> 下面:
<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="http://img.juhife542d.com图片 url" /></a>
Extra knowledge
在 修改HTML 里面,一些代码是很正式的,跟我们平时添加的代码不一样哦、看以下的例子:

1. 分行 <br/>
2. 图片 <img src='图片 url'/> 

相关文章:
- 无链接式 navigator (BT) -