jquery弹出信息框插件 半透明遮罩窗口 兼容性强
特效预览：
CSS代码：
01 |
<style> |
02 |
body{ font-family:"宋体"; font-size:12px; margin:0px; padding:0px; color:#333333;}
|
03 |
div,ul,li,h1,h2,h3,h4,h5.h6,img,p,dl,dt,dd,ol,th,td{ margin:0px; padding:0px;}
|
04 |
li{ list-style-type:none;}
|
05 |
form,input,button,option,textarea,select{ margin:0px; padding:0px;}
|
06 |
input,button,option,textarea,select{ font:100% Tahoma,Helvetica,Arial,sans-serif;}
|
07 |
a{ color:#333333; text-decoration:none;}
|
08 |
a:link{ text-decoration:none;}
|
09 |
a:visited{ text-decoration:none;}
|
10 |
a:hover{ text-decoration:underline;}
|
11 |
a:active{ text-decoration:none;}
|
12 |
img{ border:0px;}
|
13 |
/*弹出窗口全局样式*/ |
14 |
.popWarp{background:#111;-moz-opacity: 0.5;opacity:0.5;filter: alpha(opacity=50);position:absolute;z-index:1200;}
|
15 |
.popWin{display:none; width:415px; background:#E4E4E4; padding:5px; position:absolute; left:40%; top:20%; z-index:1280;}
|
16 |
.popWin .popbox{ background:#fff; border:#C4C4C4 1px solid; padding:0 4px 13px 4px;}
|
17 |
.popWin .popbox h3{ height:36px; border-bottom:#47B030 1px solid; font-size:14px; line-height:36px; padding:0 8px; color:#000;background: #fff;}
|
18 |
.popWin .popbox h3 b{ float:left;}
|
19 |
.popWin .popbox h3 span{ float:right; font-weight:100; cursor:pointer;}
|
20 |
.popWin .popbox ul{ padding:44px 0 10px 67px;}
|
21 |
.popWin .popbox ul li{ margin-bottom:16px;}
|
22 |
.popWin .popbox ul li span{ line-height:25px; float:left; display:block;}
|
23 |
.popWin .popbox ul li input{ width:151px; height:20px; border:#8E9BA3 1px solid; line-height:20px;}
|
24 |
.popWin .popbox ul li.button{ padding:36px 15px 0 0;}
|
25 |
.popWin .popbox ul li.button input{ width:78px; height:28px; background:#87BC48; border:#4D8B02 1px solid; float:right; color:#fff; font-size:14px; cursor:pointer; margin-right:15px;}
|
26 |
</style> |
JS插件代码：
001 |
<sscript src="http://www.5xsj.net/jquery/jquery/jquery-1.7.1.min.js" type="text/javascript">
|
002 |
003 |
<sscript type="text/javascript">
|
004 |
/*弹出窗口插件*/ |
005 |
(function($){
|
006 |
$.fn.dialog=function(flag,options){
|
007 |
var opts = $.extend({}, $.fn.dialog.options, options);
|
008 |
var popDiv = this;
|
009 |
if(flag=="close" && popDiv.is(":visible")){
|
010 |
if(popDiv.data("popWarp")){
|
011 |
popDiv.data("popWarp").remove();
|
012 |
}
|
013 |
popDiv.hide();
|
014 |
return;
|
015 |
}
|
016 |
var maxH = $(document).height()+"px";
|
017 |
var maxW = $(window).width()+"px";
|
018 |
var winX = ($(window).width()- popDiv.width())/2 + "px";
|
019 |
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
|
020 |
var popWarp=$("
|
021 |
<div> |
022 |
").addClass(opts.popWarp);
|
023 |
if(flag=="open" && popDiv.is(":hidden")){
|
024 |
popDiv.data("popWarp",popWarp);
|
025 |
popDiv.after(popWarp);
|
026 |
popWarp.css({maxW,height:maxH,left:"0px",top:"0px","z-index":opts.zindex});
|
027 |
popDiv.css({left:winX,top:winY,"z-index":(opts.zindex+1)});
|
028 |
popDiv.show();
|
029 |
|
030 |
}
|
031 |
$(window).resize(function(){
|
032 |
var maxH = $(document).height()+"px";
|
033 |
var maxW = $(window).width()+"px";
|
034 |
var winX = ($(window).width()- popDiv.width())/2 + "px";
|
035 |
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
|
036 |
popDiv.css({left:winX,top:winY});
|
037 |
popWarp.css({maxW,height:maxH,left:"0px",top:"0px"});
|
038 |
});
|
039 |
$(opts.closeWin).click(function(){
|
040 |
if(popDiv.data("popWarp")){
|
041 |
popDiv.data("popWarp").remove();
|
042 |
}
|
043 |
popDiv.hide();
|
044 |
try{
|
045 |
if (objfocus) {
|
046 |
objfocus.focus();
|
047 |
}
|
048 |
}catch (e){
|
049 |
}
|
050 |
});
|
051 |
//判断是否需要滚动;
|
052 |
var con={
|
053 |
scrol:function(kg){
|
054 |
if(kg!="off"){
|
055 |
$(window).bind("scroll.popWin"+popDiv.attr("id"),function (){
|
056 |
var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";
|
057 |
popDiv.animate({top : offsetTop },{duration:380 , queue:false });
|
058 |
});
|
059 |
}else{
|
060 |
$(window).unbind("scroll.popWin"+popDiv.attr("id"));
|
061 |
}
|
062 |
}
|
063 |
};
|
064 |
con.scrol("");
|
065 |
return con;
|
066 |
};
|
067 |
$.fn.dialog.options={
|
068 |
closeWin:".closeWin",
|
069 |
popWarp:"popWarp",
|
070 |
zindex:999
|
071 |
};
|
072 |
$.fn.popWin=function(closeId,scrolls){
|
073 |
var popDiv = this;
|
074 |
var maxH = $(document).height()+"px";
|
075 |
var maxW = $(window).width()+"px";
|
076 |
var winX = ($(window).width()- popDiv.width())/2 + "px";
|
077 |
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
|
078 |
this.after("
|
079 |
<div class="popWarp">
|
080 |
|
081 |
</div>
|
082 |
"); |
083 |
$(".popWarp").css({maxW,height:maxH,left:"0px",top:"0px"});
|
084 |
popDiv.css({left:winX,top:winY});
|
085 |
popDiv.show();
|
086 |
$(window).resize(function(){
|
087 |
var maxH = $(document).height()+"px";
|
088 |
var maxW = $(window).width()+"px";
|
089 |
var winX = ($(window).width()- popDiv.width())/2 + "px";
|
090 |
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
|
091 |
popDiv.css({left:winX,top:winY});
|
092 |
$(".popWarp").css({maxW,height:maxH,left:"0px",top:"0px"});
|
093 |
});
|
094 |
popDiv.find(closeId).click(function(){
|
095 |
$('#dialog1').dialog('close');
|
096 |
$(".popWarp").remove();
|
097 |
popDiv.hide();
|
098 |
});
|
099 |
//判断是否需要滚动;
|
100 |
if(scrolls){
|
101 |
var menuYloc = popDiv.offset().top;
|
102 |
$(window).scroll(function (){
|
103 |
var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";
|
104 |
popDiv.animate({top : offsetTop },{duration:380 , queue:false });
|
105 |
});
|
106 |
}
|
107 |
};
|
108 |
|
109 |
$.fn.fileLoad=function(flag,options){
|
110 |
var opts = $.extend({}, $.fn.dialog.options, options);
|
111 |
var popDiv = this;
|
112 |
if(flag=="close" && popDiv.is(":visible")){
|
113 |
if(popDiv.data("popWarp")){
|
114 |
popDiv.data("popWarp").remove();
|
115 |
}
|
116 |
var div = document.getElementById("fileLoad");
|
117 |
div.style.display = "none";
|
118 |
popDiv.hide();
|
119 |
$(".popWarp").hide();
|
120 |
return;
|
121 |
}
|
122 |
if(flag=="open"){
|
123 |
popDiv.show();
|
124 |
}
|
125 |
$(window).resize(function(){
|
126 |
var maxH = $(document).height()+"px";
|
127 |
var maxW = $(window).width()+"px";
|
128 |
var winX = ($(window).width()- popDiv.width())/2 + "px";
|
129 |
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
|
130 |
popDiv.css({left:winX,top:winY});
|
131 |
popWarp.css({maxW,height:maxH,left:"0px",top:"0px"});
|
132 |
});
|
133 |
$(opts.closeWin).click(function(){
|
134 |
if(popDiv.data("popWarp")){
|
135 |
popDiv.data("popWarp").remove();
|
136 |
}
|
137 |
popDiv.hide();
|
138 |
try{
|
139 |
if (objfocus) {
|
140 |
objfocus.focus();
|
141 |
}
|
142 |
}catch (e){
|
143 |
}
|
144 |
});
|
145 |
//判断是否需要滚动;
|
146 |
var con={
|
147 |
scrol:function(kg){
|
148 |
if(kg!="off"){
|
149 |
$(window).bind("scroll.popWin"+popDiv.attr("id"),function (){
|
150 |
var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";
|
151 |
popDiv.animate({top : offsetTop },{duration:380 , queue:false });
|
152 |
});
|
153 |
}else{
|
154 |
$(window).unbind("scroll.popWin"+popDiv.attr("id"));
|
155 |
}
|
156 |
}
|
157 |
};
|
158 |
con.scrol("");
|
159 |
return con;
|
160 |
};
|
161 |
})(jQuery); |
162 |
</div> |
163 |
</sscript></sscript> |
HTML代码：
01 |
<div id="dialog1" class="popWin">
|
02 |
|
03 |
<div class="popbox">
|
04 |
|
05 |
<h3>
|
06 |
<b>提示</b>
|
07 |
</h3>
|
08 |
09 |
<ul>
|
10 |
|
11 |
<li>
|
12 |
<span id="sg"></span>
|
13 |
</li>
|
14 |
15 |
<li class="button">
|
16 |
<input class="closeWin" value="确 定" type="button">
|
17 |
</li>
|
18 |
19 |
</ul>
|
20 |
21 |
</div>
|
22 |
23 |
</div>
|
调用代码：
1 |
<a href="#" onclick="pop();">弹出</a> <sscript type="text/javascript">
|
2 |
function pop(){ |
3 |
$("#sg").html("恭喜你!真好运!获得Iphone 4s一部!");
|
4 |
$('#dialog1').dialog('open');
|
5 |
}
|
6 |
7 |
</sscript>
|