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({width: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({width: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({width: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({width: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({width: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>