【主题美化&增强系列】Jquery式的JS进行外链判断 [复制链接]

上一主题下一主题查看指定楼层

— 本帖被 ralix 设置为精华(2010-10-03) —

效果

原理——超级简单
1.append进行传输
2.indexOf进行判断

记得加载Jquery

JS代码——English

$('a:not(.nboxla)').click(function(){
var URLnow = document.location.href.match(/^(http:\/\/)?([^\/]+)/i);
var nBoxURL = URLnow[2];
if(this.href.length>0&this.href.indexOf('javascript')<0){
if(this.href.indexOf(nBoxURL)<0)
{this.nBoxHref = this.href;
this.nBoxHref = (this.nBoxHref.length>35?this.nBoxHref.toString().substring(0,35)+"...":this.nBoxHref);
var nBox = '<div id="nbox"></div><div class="nbox"><h4>Warning</h4>U are going to visit an OUTSIDE website,<br />Are u Sure?<br />URL: '+this.nBoxHref+'<br /><p><a id="nboxcontinue" href="'+this.href+'" target="_blank">Continue</a><a id="nboxcancel">Cancel</a></p><br /></div><script type="text/javascript">$("#nboxcancel, #nbox").click(function(){$("#nbox, .nbox").remove();});$("#nboxcontinue").click(function(){$(this).text("Risk Urself");window.open = $(this).attr("href");});</script>';
$('body').append(nBox);
return false;}
}
});

JS代码——中文

$('a:not(.nboxla)').click(function(){
var URLnow = document.location.href.match(/^(http:\/\/)?([^\/]+)/i);
var nBoxURL = URLnow[2];
if(this.href.length>0&this.href.indexOf('javascript')<0){
if(this.href.indexOf(nBoxURL)<0)
{this.nBoxHref = this.href;
this.nBoxHref = (this.nBoxHref.length>35?this.nBoxHref.toString().substring(0,35)+"...":this.nBoxHref);
var nBox = '<div id="nbox"></div><div class="nbox"><h4>警告</h4>您将要访问的链接非本站内部链接，<br />确定访问？<br />地址: '+this.nBoxHref+'<br /><p><a id="nboxcontinue" href="'+this.href+'" target="_blank">继续</a><a id="nboxcancel">取消</a></p><br /></div><script type="text/javascript">$("#nboxcancel,#nbox").click(function(){$("#nbox,.nbox").remove();});$("#nboxcontinue").click(function(){$(this).text("请自行承担后果");window.open = $(this).attr("href");});</script>';
$('body').append(nBox);
return false;}
}
});

CSS美化

#nbox{ /*此tag作用为整体覆盖*/
z-index:998; /*层显示为998*/
position:fixed; /*固定*/
top:0; /*距上方*/
left:0; /*距左方*/
height:100%; /*高度百分百，即占整个浏览器页面的100%，全覆盖*/
width:100%; /*宽度百分百，同上*/
background:url(images/nbox.png); /*此为透明图片*/
}
.nbox{ /*此tag作用为包裹内容，使其整体居中*/
font:110%/135% 'Comic Sans MS',Georgia, 'Times New Roman', Times, serif; /*字体，请自定义*/
text-shadow:#ccc 1px 1px 1px; /*在Chrome与FF下非常友好的文字阴影*/
z-index:999; /*层显示为999，即为最上层*/
margin:0 auto; /*左右居中*/
width:300px; /*宽度*/
height:150px; /*高度*/
position:fixed; /*固定*/
top:50%; /*浏览器50%的位置*/
left:50%; /*同上*/
margin:-75px 0 0 -150px; /*对位置进行修整，使其中点与浏览器中心重合顺序为上右下左*/
background:#e5eff1; /*背景色*/
border:3px #eff solid; /*边框颜色*/
padding:5px;
}
.nbox h4,.nbox p{ /*此tag作用为标题以及内容*/
width:100%; /*宽度百分百*/
padding:10px 0;
text-align:center; /*居中*/
}
.nbox a{
cursor:pointer;
padding:5px 20px;
}
.nbox a:hover{
background:#fcf7bd;
}