欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js彈出層(jQuery插件形式附帶reLoad功能)

 更新時間:2013年04月12日 17:30:11   作者:  
之前的彈出層做的挺好,但是代碼結構有問題,這次用到了,重構了一下,改為jQuery的插件形式,感覺還不錯,有興趣的朋友可以參考下,希望可以幫助到你
之前做一個項目,感覺里面的彈出層做的挺好,但是代碼結構有問題,這次用到了,重構了一下,改成jQuery的插件形式,并增加了reLoad的功能,感覺還不錯,代碼如下:
復制代碼 代碼如下:

(function($){
$.module={
_showCoverLayer:function(){//顯示遮蓋層
this.coverLayer=$("#TB_overlay");
var height=$(document).height()+"px";
var width=$(document).width()+"px";
if(this.coverLayer.length>0){
this.coverLayer.css({"visibility":"visible","height":height,"width":width});
}else{
this.coverLayer=$("<div id='TB_overlay' style='height:"+height+";width:"+width+"'></div>");
$("body").append(this.coverLayer);
}
},
_hideCoverLayer:function(){//隱藏遮蓋層
this.coverLayer.css("visibility","hidden");
},
_showAjaxLoad:function(imgUrl){
this.ajaxLayer=$("#TB_load");
if(this.ajaxLayer.length>0){
this.ajaxLayer.css({"visibility":"visible"});
$("#TB_loadContent").css({"display":"block"});
}else{
this.ajaxLayer=$("<div id='TB_load'><div id='TB_loadContent'><img src='"+imgUrl+"' /></div></div>");
$("body").append(this.ajaxLayer);
}
},
_hideAjaxLoad:function(){
this.ajaxLayer.css("visibility","hidden");
$("#TB_loadContent").css({"display":"none"});
},
showWin:function(opt){//url,title,width,height,fixTop,fixLeft,imgUrl,top
this._showCoverLayer();
this.imgUrl=opt.imgUrl || "/image/ajax-loader.gif";
this._showAjaxLoad(this.imgUrl);
this.win=$("#TB_window");
var that=this;
if(this.win.length==0){
this.win=$("<div id='TB_window'></div>");
$("body").append(this.win);
this.win.append("<div id='TB_closeAjaxWindow' style='cursor:move' onmousedown='drag(this.parentNode,event);'><span id='TB_close'>X</span><span id='TB_title'>"+opt.title+"</span></div><div id='TB_ajaxContent'></div>");
$("#TB_close").click(function(){
that.hideWin();
});
}

this._init(opt);

$("#TB_ajaxContent").load(opt.url, function() {
that._hideAjaxLoad();
that.win.slideDown("normal");
});
},
hideWin:function(){
var that=this;
this.win.fadeOut("fast",function(){
that._hideCoverLayer();
});
},
_init:function(opt){
$("#TB_title").html(opt.title);
var top=opt.top || ( $(window).height() - opt.height ) /2+(opt.fixTop || 0);// +$(window).scrollTop() ;
var left=( $(window).width() - opt.width ) / 2+(opt.fixLeft || 0);//+$(window).scrollLeft();
this.win.css({"height":opt.height+"px",
"width":opt.width+"px",
"top":top+"px",
"left":left+"px"
});
},
reLoad:function(opt){//加載新頁面
var that=this;
this.win.fadeOut("fast",function(){
that._showAjaxLoad(that.imgUrl);
that._init(opt);
$("#TB_ajaxContent").load(opt.url, function() {
that._hideAjaxLoad();
that.win.fadeIn("normal");
});
});
}
}
})(jQuery);

CSS代碼如下:
復制代碼 代碼如下:

body {background-color:#fff;}
html, body {height:100%;}
html body{font:12px Arial, Helvetica, sans-serif;color:#333333}
html>body{font:12px Arial, Helvetica, sans-serif;color:#333333}
#TB_overlay {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
height: 100%;
background-color:#CCC;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
#TB_window {
top: 0px;
left: 0px;
position: fixed;
_position: absolute;
background: #fff;
z-index: 102;
color:#000000;
display:none;
border:5px solid #666;
}
#TB_caption{
height:25px;
padding:10px 30px 10px 25px;
}
#TB_closeWindow{
height:25px;
padding:10px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:5px 10px 7px 0;
margin-bottom:1px;
text-align:right;
background-color:#e8e8e8;
}
#TB_close{
cursor:pointer;
}
#TB_title{
float: left;
font-weight: bold;
margin-left: 10px;
}
#TB_ajaxContent{
padding:2px 15px 15px 15px;
overflow:auto;
}
#TB_load{
text-align: center;
position: fixed;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
z-index:101;
}
/*Download by http://sc.xueit.com*/
#TB_loadContent{
margin-left: -125px;
position: absolute;
top: -50px;
left: 50%;
width: 250px;
height: 100px;
visibility: visible;
}

這樣來使用:
復制代碼 代碼如下:

$.module.showWin({url:"/deposit/clear/"+depositId+"?"+(+new Date),
title:"清退關閉",
width:550,
height:350});

效果如下:
 
關閉的時候,這樣調用:
復制代碼 代碼如下:

$.module.hideWin();

這個彈出層有幾個問題:
1、因為采用的是$.load()的方式,所以只能加載同源的url
2、在單頁面的情況下,可以很好的定位,如果作為在iframe中彈出,則需要傳入top值來輔助定位。這個問題是因為$(window).top()在單頁面下和iframe下取的值不一樣導致的,也不知該怎么解決。有了解的朋友說一下,不勝感激。

相關文章

  • ES6模板字符串和標簽模板的應用實例分析

    ES6模板字符串和標簽模板的應用實例分析

    這篇文章主要介紹了ES6模板字符串和標簽模板的應用,結合實例形式分析了ES6模板字符串和標簽模板的功能、原理、用法及相關操作注意事項,需要的朋友可以參考下
    2019-06-06
  • Object.defineProperty()函數之屬性描述對象

    Object.defineProperty()函數之屬性描述對象

    這篇文章主要介紹了Object.defineProperty()函數之屬性描述對象,JavaScript?提供了一個內部數據結構,用來描述對象的屬性,控制它的行為,比如該屬性是否可寫、可遍歷等等。這個內部數據結構稱為:屬性描述對象
    2022-09-09
  • JavaScript中實現(xiàn)sprintf、printf函數

    JavaScript中實現(xiàn)sprintf、printf函數

    這篇文章主要介紹了JavaScript中實現(xiàn)sprintf、printf函數,這兩個函數在大多數編程語言中都有,但JS中卻沒有,本文介紹在js中實現(xiàn)這兩個函數功能,需要的朋友可以參考下
    2015-01-01
  • 在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法

    在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法

    今天小編大家分享一篇在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript實現(xiàn)瀑布動畫

    JavaScript實現(xiàn)瀑布動畫

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)瀑布動畫,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • zeroclipboard復制到剪切板的flash

    zeroclipboard復制到剪切板的flash

    雖然網上實現(xiàn)Ctrl + C的JS代碼已經有很多了,但我還是向大家推薦一個比較好的插件zeroclipboard,兼容所有瀏覽器
    2010-08-08
  • JavaScript中的call和apply的用途以及區(qū)別

    JavaScript中的call和apply的用途以及區(qū)別

    本文主要介紹了JavaScript中的call和apply的用途以及區(qū)別。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • JavaScript Table排序 2.0 (更新)

    JavaScript Table排序 2.0 (更新)

    JavaScript,Table,排序,order,attribute,property,sort,Compare
    2009-05-05
  • javascript實現(xiàn)避免頁面按鈕重復提交

    javascript實現(xiàn)避免頁面按鈕重復提交

    很多時候我們都需要防止重復提交,這方面的文章也比較多,實現(xiàn)的途徑差別也很大.因為有些時候即使服務器能夠識別重復的提交,也會造成問題.比如需要很長等待時間的操作,在首次提交后,不斷重復提交,頁面可能會死掉.用腳本來控制的話可以防止這種問題.
    2015-01-01
  • js支持鍵盤控制的左右切換立體式圖片輪播效果代碼分享

    js支持鍵盤控制的左右切換立體式圖片輪播效果代碼分享

    這篇文章主要介紹了js支持鍵盤控制的左右切換立體式圖片輪播效果,很實用的代碼,推薦給大家,有需要的小伙伴可以參考下。
    2015-08-08

最新評論