JQuery插件第十五个:弹出框功能增强版
<a class="hit" href="sub/Huiyuanzhongxinfabu/Zhichiredutishi.html" >
点击弹出框
</a>
<br />
<a class="hit" href="sub/Huiyuanzhongxinfabu/Woyaotuijian.html" target="go" >
点击浮动框架一
</a>
<br /><a class="hit" href="sub/Huiyuanzhongxinfabu/Liuyantishi.html" target="go" >
点击浮动框架二
</a>
<iframe frameborder="0" scrolling="no" name="go" ></iframe>
<script type="text/javascript" >
(function ($) {
$.fn.showDialog = function(options){
var defaults = {
closeBtn:"img[src$='slw_05.gif']",//嵌套页面的关闭窗口标志 例子 ： ".pClose" "img[src$='slw_05.gif']"
drag: true,
useOverlay: true,
opacity: 0.6,
useRefresh:false, //用于关闭后是否刷新父窗体
usePosition:true //弹出框默认水平垂直居中
}
var opts = $.extend(defaults, options);
function _dyniframesize(ifr){
var height=0,width=0;
if(ifr.length>0){
//自动调节iframe高度
var contents=ifr.contents();
ifr.show();
if($("body>*",contents).height()!=null){
height=$("body>*",contents).height();
ifr.height(height);
}
if($("body>*",contents).width()!=null)
{
width=$("body>*",contents).width();
ifr.width(width);
//iframe上有任何点击都需再设置嵌套页面的新高度
contents.click(function(){
height=$("body>*",contents).height();ifr.height(height);
});
//iframe上设置关闭弹出框
if($(opts.closeBtn,contents).length>0)
$(opts.closeBtn,contents).click(function(){
if(opts.useRefresh)
{
window.location.href=window.location.href;
}
else{
if(opts.useOverlay)$("#iframebg").remove();
ifr.hide();
}
}).css({cursor:'pointer'});
}
}
}
function _loadOverlay(o){ //加载遮罩
pageWidth=($.browser.version=="6.0")?$(document).width()-21:$(document).width();
o?o.remove():null;
o=$(document.createElement("div"));o.get(0).id="iframebg";
o.css({position:"absolute","z-index":1,left:0,top:0,display:"none",width:pageWidth,height:$(document).height(),"min-height":"100%","background-color":"#000",filter:"alpha(opacity=60)","-moz-opacity": 0.6,opacity: opts.opacity}).appendTo("body");
o.show();
return o;
}
function _drag(f) { //拖动弹出框窗体
var $f=f;
var c=$f.contents();
var dx, dy, moveout;
c.mousedown(function (e) {
dx = e.clientX - parseInt($f.css("left"));
dy = e.clientY - parseInt($f.css("top"));
c.mousemove(move).mouseout(out).mouseup(up);
});
move = function (e) {
moveout = false;
win = $(window);
var x, y;
if (e.clientX - dx < 0) {
x = 0;
} else {
if (e.clientX - dx > (win.width() - c.width())) {
x = win.width() - c.width();
} else {
x = e.clientX - dx;
}
}
if (e.clientY - dy < 0) {
y = 0;
} else {
y = e.clientY - dy;
}
$f.css({
left: x,
top: y
});
}
out = function (e) {
moveout = true;
setTimeout(function () {
moveout && up(e);
}, 200);
}
up = function (e) {
c.unbind("mousemove", move).unbind("mouseout", out).unbind("mouseup", up);
}
}
//主要执行过程
this.each(function(){
var $obj=$(this);
var t=this.target.toLowerCase();
var target=((/_blank|_self|_parent|_top/g.test(t))?false:t)||false;
var href =this.href|| this.rel || false;
if(!target){
$obj.after("<iframe frameborder='no' scrolling='no' style='display:none' ></iframe>");
var $ifr=$obj.next(),$overlay=null;
$obj.click(function(){
if(href){
$ifr.attr("src",href+"?t="+new Date().getTime());
$ifr.load(function(){
if(opts.useOverlay)_loadOverlay($overlay);
_dyniframesize($ifr);
if(opts.drag)_drag($ifr);
if(opts.usePosition){
$ifr.css({"position":"absolute"
,"z-index":2
,"left":($(document).width() - $ifr.width())/2
,"top":(document.documentElement.clientHeight-$ifr.height())/2 + $(document).scrollTop()
});
}
});
this.blur();
return false;
}
});
}else{
if(href){
$("iframe[name="+target+"]").load(function(){
_dyniframesize($(this));
});
}
}
});
};
})(jQuery);
$(function(){
$(".hit").showDialog({
drag: true
,useOverlay: false
,useRefresh:true //用于关闭后是否刷新父窗体
});
});
</script>
showDialog函数下有六个属性：
closeBtn 用于嵌套页面的关闭窗口标志 例子 ： ".pClose"或者 "img[src$='slw_05.gif']"
drag 是否拖动,默认拖动
useOverlay 是否遮罩,默认遮罩
opacity 用于遮罩层的透明度 ,默认0.6
useRefresh 用于关闭后是否刷新父窗体,默认不刷新
usePosition 用于弹出框默认水平垂直居中,默认居中
作用：方便固定iframe的高度自适应和需要弹出框特效的页面
bug：多个弹出后的拖动会覆盖前面的拖动,360浏览器兼容问题还需解决; 遮照层的处理还有细节问题.