shihuan830619
- 浏览: 582815 次
- 性别:
- 来自: 上海
-
文章分类
- 全部博客 (174)
- JBPM (3)
- WWF (0)
- JavaScript (11)
- J2EE (40)
- OperationSystem (11)
- 数据库 (12)
- CSS (1)
- Ajax (2)
- J2SE (30)
- Tools (10)
- 服务器中间件 (3)
- 异常 (0)
- Flex (5)
- jQuery (11)
- html (9)
- Ejb (1)
- HTML5 Shiv–让该死的IE系列支持HTML5吧 (1)
- Spring (9)
- Quartz (3)
- log4j (1)
- maven (1)
- cpdetector (1)
- JSON (1)
- log4jdbc (1)
- asm (8)
- FusionCharts (1)
- jqplot (1)
- highcharts (1)
- excanvas (1)
- html5 (1)
- jpcap介绍 (1)
- weblogic (3)
- URLURLClassLoader (0)
- URLClassLoader (1)
- ant (2)
- ivy (2)
- nexus (1)
- IT (0)
- LoadRunner (1)
- SCSS (1)
- ruby (1)
- webstorm (1)
- typescript (1)
- Jboss7 (1)
- wildfly (1)
- oracle (5)
- esb (0)
- dubbo (2)
- zookeeper (3)
- eclipse (1)
- Android (2)
- Studio (1)
- Google (1)
- 微信 (1)
- 企业号 (1)
- Linux (13)
- Oracle12c (1)
- Hadoop (1)
- InletexEMC (1)
- Windows (1)
- Netty (3)
- Marshalling (2)
- Protobuf (1)
- gcc (1)
- Git (1)
- GitLab (1)
- shell (2)
- java (3)
- Spring4 (1)
- hibernate4 (1)
- postgresql (1)
- ApacheServer (2)
- Tomcat (2)
- ApacheHttpServer (2)
- realvnc (1)
- redhat (7)
- vncviewer (1)
- LVS (4)
- LVS-DR (1)
- RedHat6.5 (5)
- LVS-NAT (1)
- LVS-IPTUNNEL (2)
- LVS-TUN (1)
- keepalived (2)
- yum (1)
- iso (1)
- VMware (1)
- redhat5 (1)
- ha (1)
- nginx (2)
- proguard (1)
- Mat (1)
- DTFJ (1)
- axis2 (1)
- web service (1)
- centos (1)
- random (1)
- urandom (1)
- apache (1)
- IBM (1)
- cve (1)
- 漏洞 (1)
- JDBC (1)
- DataSource (1)
- jdk (1)
- tuxedo (2)
- wtc (1)
最新评论
-
skying007：
好资料，谢谢分享给啊
FusionCharts在服务器端导出图片(J2EE版) -
cgnnzg：
大神好 可以发一份源码给我学习么 多谢了 978241085 ...
springmvc+dubbo+zookeeper -
jifengjianhao：
求源码：854606899@qq.com
springmvc+dubbo+zookeeper -
wdloyeu：
shihuan8@163.com邮箱网盘在哪，没找到。能给份源 ...
Java Socket长连接示例代码 -
huangshangyuanji：
求代码：45613032@qq.com
springmvc+dubbo+zookeeper
jQueryPopup.html代码如下：
popup_layer.js代码如下：
core.css代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>基于jQuery弹出层有9种效果-懒人建站</title>
<meta name="keywords" content="网页特效,网页模板,导航菜单,焦点幻灯片,JS代码" />
<meta name="description" content="懒人建站为您提供-HTML+CSS模板，JS广告代码，网页特效，导航菜单，焦点幻灯片代码，原创视频教程与网页模板和CSS技巧。" />
<link href="styles/core.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery-1.3.min.js" type="text/javascript" language="javascript"></script>
<script src="scripts/popup_layer.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function() {
//示例1，默认弹出层
new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});
//示例2，弹出层位置可偏移
new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",
offsets:{
x:102,
y:-41
}
});
//示例3，使用弹出层默认特效
new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});
//示例4，使用弹出层特效，并重载特效
var t4 = new PopupLayer({trigger:"#ele4",popupBlk:"#blk4",closeBtn:"#close4",useFx:true});
t4.doEffects = function(way){
way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");
};
//示例5，使用自定义样式，给最外层容器套上一个class,然后在css定义即可
new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});
//示例6，使用遮罩
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});
//示例7，使用不同的事件来触发
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});
//示例8，使用自定义事件
new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",
onBeforeStart:function(){
this.isDoPopup = false;
setTimeout(function(){this.isDoPopup = true}.binding(this),5000);
}
});
//示例9，综合效果
var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",useOverlay:true,useFx:true,
offsets:{
x:0,
y:-41
}
});
t9.doEffects = function(way){
if(way == "open"){
this.popupLayer.css({opacity:0.3}).show(400,function(){
this.popupLayer.animate({
left:($(document).width() - this.popupLayer.width())/2,
top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
opacity:0.8
},1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
}.binding(this));
}
else{
this.popupLayer.animate({
left:this.trigger.offset().left,
top:this.trigger.offset().top,
opacity:0.1
},{duration:500,complete:function(){this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
}
}
});
</script>
</head>
<body>
<h1>基于jQuery弹出层有9种效果</h1>
<div id="emample1" class="example">
<div id="ele1" class="tigger">触发元素1</div><div class="description">示例1：默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID，其中关闭按钮为可选项。<br />new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk1" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例1，默认弹出层</h2>
<a href="javascript:void(0)" id="close1" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample2" class="example">
<div id="ele2" class="tigger">触发元素2</div><div class="description">示例2：参数offsets可设置弹出层位置偏移量，让弹出层的位置随心所欲<br />new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",offsets:{x:102,y:-41}});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk2" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例2，弹出层位置可偏移</h2>
<a href="javascript:void(0)" id="close2" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample3" class="example">
<div id="ele3" class="tigger">触发元素3</div><div class="description">示例3：useFx设置为true即可使用弹出层默认特效<br />new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk3" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例3，使用弹出层特效</h2>
<a href="javascript:void(0)" id="close3" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample4" class="example">
<div id="ele4" class="tigger">触发元素4</div><div class="description">示例4：使用弹出层特效，重载特效函数来完成自定义特效<br />var t4 = new PopupLayer({trigger:"#ele4",popupBlk:"#blk4",closeBtn:"#close4",useFx:true});<br />
t4.doEffects = function(way){<br />
way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");<br />}
</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk4" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例4，使用弹出层特效，并重载特效</h2>
<a href="javascript:void(0)" id="close4" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample5" class="example">
<div id="ele5" class="tigger">触发元素5</div><div class="description">示例5：在弹出层容器上加上自定义的class<br />new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk5" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例5,使用自定义样式</h2>
<a href="javascript:void(0)" id="close5" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample6" class="example">
<div id="ele6" class="tigger">触发元素6</div><div class="description">示例6：useOverlay设置为true即可在弹出层后使用遮罩<br />new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk6" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例6,使用遮罩</h2>
<a href="javascript:void(0)" id="close6" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample7" class="example">
<div id="ele7" class="tigger">触发元素7</div><div class="description">示例7：eventType为事件触发类型，表示以何种方式触发弹出层<br />new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk7" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例7,使用不同的事件来触发</h2>
<a href="javascript:void(0)" id="close7" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample8" class="example">
<div id="ele8" class="tigger">触发元素8</div><div class="description">示例8：自定义事件，onBeforeStart在触发弹出前做一些自己想做的事。<br />这里我做的事是：在dom加载完成后，延迟5秒才能使用弹出层。（提示：可refresh页面看效果）<br />new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",<br />
onBeforeStart:function(){<br />
this.isDoPopup = false;<br />
setTimeout(function(){this.isDoPopup = true}.binding(this),5000);<br />
}<br />});
</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk8" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例8，使用自定义事件</h2>
<a href="javascript:void(0)" id="close8" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample9" class="example">
<div id="ele9" class="tigger">触发元素9</div><div class="description">示例9：综合效果<br />var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",<br />useOverlay:true,useFx:true,offsets:{x:0,y:-41}});<br />
t9.doEffects = function(way){<br />
if(way == "open"){<br />
this.popupLayer.css({opacity:0.3}).show(400,function(){<br />
this.popupLayer.animate({<br />
left:($(document).width() - this.popupLayer.width())/2,<br />
top:(document.documentElement.clientHeight -<br />
this.popupLayer.height())/2 + $(document).scrollTop(),<br />
opacity:0.8<br />
},1000,function(){this.popupLayer.css("opacity",1)}.binding(this));<br />
}.binding(this));<br />
}<br />
else{<br />
this.popupLayer.animate({<br />
left:this.trigger.offset().left,<br />
top:this.trigger.offset().top,<br />
opacity:0.1<br />
},{duration:500,complete:function(){<br /> this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});<br />
}<br />
}<br /></div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗？</option>
</select>
<div id="blk9" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例9,综合效果</h2>
<a href="javascript:void(0)" id="close9" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="blk10" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例10,永远在中间的层</h2>
<a href="javascript:void(0)" id="close10" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</body>
</html>
popup_layer.js代码如下：
Function.prototype.binding = function() {
if (arguments.length < 2 && typeof arguments[0] == "undefined") return this;
var __method = this, args = jQuery.makeArray(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat(jQuery.makeArray(arguments)));
}
}
var Class = function(subclass){
subclass.setOptions = function(options){
this.options = jQuery.extend({}, this.options,options);
for(var key in options){
if(/^on[A-Z][A-Za-z]*$/.test(key)){
$(this).bind(key,options[key]);
}
}
}
var fn = function(){
if(subclass._init && typeof subclass._init == 'function'){
this._init.apply(this,arguments);
}
}
if(typeof subclass == 'object'){
fn.prototype = subclass;
}
return fn;
}
var PopupLayer = new Class({
options:{
trigger:null,
popupBlk:null,
closeBtn:null,
closeLayout:null,
popupLayerClass:"popupLayer",
eventType:"click",
offsets:{
x:0,
y:0
},
useFx:false,
useOverlay:false,
usePopupIframe:true,
isresize:true,
onBeforeShow:function(){},
onBeforeStart:function(){}
},
_init:function(options){
this.setOptions(options);
this.isSetPosition = this.isDoPopup = this.isOverlay = true;
this.popupLayer = $(document.createElement_x("div")).addClass(this.options.popupLayerClass); //初始化最外层容器
this.popupIframe = $(document.createElement_x("iframe")).attr({border:0,frameborder:0}); //容器遮罩,用于屏蔽ie6下的select
this.trigger = $(this.options.trigger); //把触发元素封装成实例的一个属性，方便使用及理解
this.popupBlk = $(this.options.popupBlk); //把弹出内容层元素封装成实例的一个属性
this.closeBtn = $(this.options.closeBtn); //把关闭按钮素封装成实例的一个属性
this.closeLayout=$(this.options.closeLayout);
$(this).trigger("onBeforeStart"); //执行自定义事件。
this._construct() //通过弹出内容层，构造弹出层，即为其添加外层容器及底层iframe
this.trigger.bind(this.options.eventType,function(){ //给触发元素绑定触发事件
$(this).trigger("onBeforeShow"); //取代隐藏所有层的代码，更改为自定义事件，在自定义事件中处理
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
this.options.useOverlay?this._loadOverlay():null; //如果使用遮罩则加载遮罩元素
(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
this.options.useFx?this.doEffects("open"):this.popupLayer.show();
}
}.binding(this));
this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null; //如果有关闭按钮，则给关闭按钮绑定关闭事件
this.options.closeLayout?this.closeLayout.bind("mouseleave",this.close.binding(this)):null;
},
_construct:function(){ //构造弹出层
this.popupBlk.show();
this.popupLayer.append(this.popupBlk.css({opacity:1})).appendTo($(document.body)).css({position:"absolute",'z-index':2,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
this.options.usePopupIframe?this.popupLayer.append(this.popupIframe):null;
this.recalculatePopupIframe();
this.popupLayer.hide();
},
_loadOverlay:function(){ //加载遮罩
pageWidth = ($.browser.version=="6.0")?$(document).width()-21:$(document).width();
this.overlay?this.overlay.remove():null;
this.overlay = $(document.createElement_x("div"));
this.overlay.css({position:"absolute","z-index":1,left:0,top:0,zoom:1,display:"none",width:pageWidth,height:$(document).height()}).appendTo($(document.body)).append("<div style='position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0.3;filter:Alpha(opacity=30);background:#000'></div><iframe frameborder='0' border='0' style='width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;filter:Alpha(opacity=0);'></iframe>")
},
doresize:function(){
this.overlay?this.overlay.css({width:($.browser.version=="6.0")?$(document).width()-21:$(document).width(),height:($.browser.version=="6.0")?$(document).height()-4:$(document).height()}):null;
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
},
setPosition:function(left,top){ //通过传入的参数值改变弹出层的位置
this.popupLayer.css({left:left,top:top});
},
doEffects:function(way){ //做特效
way == "open"?this.popupLayer.show("slow"):this.popupLayer.hide("slow");
},
recalculatePopupIframe:function(){ //重绘popupIframe,这个不知怎么改进，只好先用这个笨办法。
this.popupIframe.css({position:"absolute",'z-index':-1,left:0,top:0,opacity:0,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
},
close:function(){ //关闭方法
this.options.useOverlay?this.overlay.hide():null;
this.options.useFx?this.doEffects("close"):this.popupLayer.hide();
}
});
core.css代码如下：
body, ul, li, div, h1, h2{padding:0;margin:0;}
ul{list-style:none;}
a{text-decoration:none;}
.clr{clear:both;overflow:hidden;height:0;}
a.closeBtn{position:absolute;top:10px;right:10px;display:block;width:60px;padding:4px 0;text-align:center;background:#fff;border:1px solid #85B6E2;color:#333;}
a.closeBtn:hover{color:#fff;border:1px solid #85B6E2;background:#85B6E2;}
body{padding:10px 20px 200px;}
h1{color:#85B6E2;text-align:center;padding-top:20px;}
.example{border:1px dashed #ccc;padding:40px;margin-top:10px;zoom:1;}
.example .description{color:#85B6E2;float:left;padding:10px 20px 0 80px;font-size:20px;}
.example .tigger{display:block;width:80px;padding:10px;text-align:center;background:#fff;border:1px solid #999;color:#333;cursor:pointer;float:left;}
.example select{margin-top:10px;}
.blk{width:500px;position:relative;}
.blk .head{padding-left:4px;}
.blk .head-right{background-position:right top;}
.blk .foot{padding-left:4px;background-position:left bottom;_height:3px;}
.blk .foot-right{background-position:right bottom;}
.blk .main{border-left:2px solid #85B6E2;border-right:2px solid #85B6E2;border-top:2px solid #85B6E2;border-bottom:2px solid #85B6E2;position:relative;background:#fff;}
.blk .main h2{font:bold 16px "Microsoft YaHei";padding:10px 20px 2px;color:#85B6E2;}
.blk .main ul{padding:20px;zoom:1;overflow:hidden;font-size:12px;}
.blk .main ul li{float:left;width:100px;text-align:center;line-height:30px;margin-bottom:10px;}
.blk .main ul li a{color:#333;display:block;}
.blk .main ul li a:hover{background:#85B6E2;color:#fff;font-weight:bold;font-size:14px;}
.t5 .blk{width:700px;}
.t5 .blk h2{color:#aaa;}
.t5 .blk .main ul li a{color:#aaa;}
* html .popup_iframe{
width:expression_r(this.previousSibling.style.width);
height:expression_r(this.previousSibling.style.height);
}
- jQueryPopup.rar (56 KB)
- 下载次数: 232
分享到：
发表评论
-
动态提交使用jQuery 完成ajax 文件下载
2016-10-05 13:46 888https://my.oschina.net/u/140962 ... -
JavaWeb发送信息到微信公众平台的企业号
2015-11-01 22:42 3806首先到微信公众平台申请微信企业号: https://qy.we ... -
让IE8支持HTML5及canvas功能
2014-07-24 16:41 2001http://code.google.com/p/explor ... -
highcharts导出图片到Excel和Pdf文件中
2014-07-24 16:17 2461http://www.hcharts.cn/ (Hig ... -
jqplot图表插件
2014-07-23 09:46 1337jqplot是基于jQuery的一款客户端画图插件。 http ... -
jquery判断360浏览器
2013-11-14 16:27 1836<!DOCTYPE HTML PUBLIC " ... -
jQuery-autoComplete-1.8.22代码例子
2012-08-12 15:41 6629到官方下载jquery-1.7.2.js和jquery-ui- ... -
jQuery实现table中的tr上下移动并保持序号不变
2011-09-09 23:41 6076jQueryMoveTr.html代码如下： <!DOC ... -
jQuery.ui的相关资料
2011-06-22 18:09 1106jQuery.ui的下载地址：http://jqueryui. ... -
JavaScript和jQuery获取input框的绝对位置
2011-06-22 09:45 2997<!DOCTYPE html PUBLIC &quo ...
相关推荐
本文将详细探讨"jquery弹出层特效"这一主题，以及相关文件如何实现这一功能。 首先，标题"jquery弹出层特效"指的是使用jQuery库创建的弹出窗口或模态对话框效果。在网页设计中，弹出层通常用于显示警告信息、用户...
在IT领域，尤其是在Web开发中，"jquery弹出层不关闭 父页面刷新"是一个常见的交互需求。这里，我们主要讨论如何使用jQuery实现这样的功能，即在一个弹出层（通常是一个模态对话框）显示时，用户可以操作父页面而不会...
《jQuery弹出层插件深度解析》 在Web开发领域，jQuery库因其简洁的API和强大的功能而广受开发者喜爱。对于用户交互和界面展示，弹出层（Modal）是不可或缺的一部分，它能够吸引用户的注意力并提供额外的信息或操作...
**jQuery弹出层插件SexyLightBox详解** 在网页设计中，弹出层是一种常见的交互元素，用于在用户点击某个链接或按钮时显示一个浮动窗口，通常用来展示图片、视频或者详细信息。SexyLightBox是一款基于jQuery的弹出层...
《jQuery弹出层技术详解与应用实践》 在网页设计中，弹出层是一种常见的交互方式，用于在不离开当前页面的情况下展示额外的信息或功能。jQuery作为一款强大的JavaScript库，提供了丰富的API和插件，使得实现弹出层...
**jQuery弹出层插件详解** 在Web开发中，弹出层（Popup）是一种常见的交互设计元素，用于显示额外的信息、对话框或者进行特定操作。jQuery作为一款强大的JavaScript库，提供了丰富的插件来实现弹出层功能。本文将...
标题中的“一款不错的Jquery弹出层插件”指的是一个基于JavaScript库JQuery设计的用于创建弹出对话框或模态窗口的插件。在网页交互设计中，弹出层通常用于显示通知、提示信息、表单或者进行确认操作，为用户提供一种...
"jQuery弹出层背景变暗"这个话题涉及到在使用jQuery时，如何创建一个具有半透明暗色背景的弹出层（也称为对话框或模态窗口），以突出显示弹出内容并降低页面其他部分的视觉干扰。 首先，我们需要理解jQuery弹出层的...
jQuery弹出层插件在网页开发中非常常见，它们用于创建弹窗、模态对话框、图片预览等效果，增强了用户体验。以下是一些流行的jQuery弹出层插件及其特点： 1. **Thickbox**: Thickbox是一款轻量级的jQuery插件，用于...
而“jQuery 弹出层”是 jQuery 应用中的一个重要功能，它允许开发者创建各种类型的弹出对话框，如模态框、提示框、信息窗口等，以提供更丰富的用户体验。在网页上，弹出层通常用于显示额外的信息、用户确认、表单...
在前端开发中，jQuery弹出层插件是用于创建弹窗效果的重要工具，它能够帮助开发者轻松实现模态对话框、提示信息、加载提示等交互功能。本篇将详细介绍jQuery弹出层插件，以及如何使用名为"Popup Div"的实例。 首先...
标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果，这在网页设计中是非常常见的一种功能，用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先，让我们理解什么是弹出层。弹...
首先，让我们深入了解一下jQuery弹出层插件的基本概念。弹出层通常包括模态对话框和非模态对话框两种类型。模态对话框会阻止用户与页面其他部分的交互，直到弹出层被关闭；而非模态对话框则允许用户在不关闭弹出层的...
**jQuery弹出层详解** 在Web开发中，弹出层是一种常见的交互元素，它能够以非侵入式的方式展示信息，提升用户体验。基于jQuery库，我们可以实现多种弹出层效果，这些效果既实用又灵活。本文将深入探讨如何利用...
《jQuery弹出层技术详解与应用实践》 在网页开发中，用户交互体验的重要性日益凸显，其中弹出层（Popup Layer）作为一种常见的交互元素，被广泛应用于提示信息、表单填写、图片预览等场景。jQuery，作为JavaScript...
《jQuery弹出层插件：实现简单遮罩弹出框效果》 在Web开发中，弹出层（Modal）是一种常见的交互元素，用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库，提供了丰富的插件来...
对于"jquery弹出层需要的js"这个主题，我们将深入探讨如何利用jQuery来创建弹出层，并结合给定的文件名，了解相关的核心知识点。 首先，`jquery-3.1.1.min.js`是jQuery库的压缩版本，它是整个项目的基础。这个文件...