弹出透明遮罩窗口插件,兼容性强,界面友好!
调用:
<script type="text/javascript">
$("#sg").html("恭喜你!真好运!获得Iphone 4s一部!");
$('#dialog1').dialog('open');
</script>
Html:
<div class="popWin" id="dialog1">
<div class="popbox">
<h3><b>提示</b></h3>
<ul>
<li><span id="sg"></span></li>
<li class="button">
<input name="" type="button" value="确 定" class="closeWin"/>
</li>
</ul>
</div>
</div>
/*弹出窗口插件*/
(function($){
$.fn.dialog=function(flag,options){
var opts = $.extend({}, $.fn.dialog.options, options);
var popDiv = this;
if(flag=="close" && popDiv.is(":visible")){
if(popDiv.data("popWarp")){
popDiv.data("popWarp").remove();
}
popDiv.hide();
return;
}
var maxH = $(document).height()+"px";
var maxW = $(window).width()+"px";
var winX = ($(window).width()- popDiv.width())/2 + "px";
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
var popWarp=$("<div/>").addClass(opts.popWarp);
if(flag=="open" && popDiv.is(":hidden")){
popDiv.data("popWarp",popWarp);
popDiv.after(popWarp);
popWarp.css({width:maxW,height:maxH,left:"0px",top:"0px","z-index":opts.zindex});
popDiv.css({left:winX,top:winY,"z-index":(opts.zindex+1)});
popDiv.show();
}
$(window).resize(function(){
var maxH = $(document).height()+"px";
var maxW = $(window).width()+"px";
var winX = ($(window).width()- popDiv.width())/2 + "px";
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
popDiv.css({left:winX,top:winY});
popWarp.css({width:maxW,height:maxH,left:"0px",top:"0px"});
});
$(opts.closeWin).click(function(){
if(popDiv.data("popWarp")){
popDiv.data("popWarp").remove();
}
popDiv.hide();
try{
if (objfocus) {
objfocus.focus();
}
}catch (e){
}
});
//判断是否需要滚动;
var con={
scrol:function(kg){
if(kg!="off"){
$(window).bind("scroll.popWin"+popDiv.attr("id"),function (){
var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";
popDiv.animate({top : offsetTop },{duration:380 , queue:false });
});
}else{
$(window).unbind("scroll.popWin"+popDiv.attr("id"));
}
}
};
con.scrol("");
return con;
};
$.fn.dialog.options={
closeWin:".closeWin",
popWarp:"popWarp",
zindex:999
};
$.fn.popWin=function(closeId,scrolls){
var popDiv = this;
var maxH = $(document).height()+"px";
var maxW = $(window).width()+"px";
var winX = ($(window).width()- popDiv.width())/2 + "px";
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
this.after("<div class='popWarp'></div>");
$(".popWarp").css({width:maxW,height:maxH,left:"0px",top:"0px"});
popDiv.css({left:winX,top:winY});
popDiv.show();
$(window).resize(function(){
var maxH = $(document).height()+"px";
var maxW = $(window).width()+"px";
var winX = ($(window).width()- popDiv.width())/2 + "px";
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
popDiv.css({left:winX,top:winY});
$(".popWarp").css({width:maxW,height:maxH,left:"0px",top:"0px"});
});
popDiv.find(closeId).click(function(){
$('#dialog1').dialog('close');
$(".popWarp").remove();
popDiv.hide();
});
//判断是否需要滚动;
if(scrolls){
var menuYloc = popDiv.offset().top;
$(window).scroll(function (){
var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";
popDiv.animate({top : offsetTop },{duration:380 , queue:false });
});
}
};
$.fn.fileLoad=function(flag,options){
var opts = $.extend({}, $.fn.dialog.options, options);
var popDiv = this;
if(flag=="close" && popDiv.is(":visible")){
if(popDiv.data("popWarp")){
popDiv.data("popWarp").remove();
}
var div = document.getElementById("fileLoad");
div.style.display = "none";
popDiv.hide();
$(".popWarp").hide();
return;
}
if(flag=="open"){
popDiv.show();
}
$(window).resize(function(){
var maxH = $(document).height()+"px";
var maxW = $(window).width()+"px";
var winX = ($(window).width()- popDiv.width())/2 + "px";
var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";
popDiv.css({left:winX,top:winY});
popWarp.css({width:maxW,height:maxH,left:"0px",top:"0px"});
});
$(opts.closeWin).click(function(){
if(popDiv.data("popWarp")){
popDiv.data("popWarp").remove();
}
popDiv.hide();
try{
if (objfocus) {
objfocus.focus();
}
}catch (e){
}
});
//判断是否需要滚动;
var con={
scrol:function(kg){
if(kg!="off"){
$(window).bind("scroll.popWin"+popDiv.attr("id"),function (){
var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";
popDiv.animate({top : offsetTop },{duration:380 , queue:false });
});
}else{
$(window).unbind("scroll.popWin"+popDiv.attr("id"));
}
}
};
con.scrol("");
return con;
};
})(jQuery);
/*基本信息*/ body{ font-family:"宋体"; font-size:12px; margin:0px; padding:0px; color:#333333;background:#fff;} div,ul,li,h1,h2,h3,h4,h5.h6,img,p,dl,dt,dd,ol,th,td{ margin:0px; padding:0px;} li{ list-style-type:none;} form,input,button,option,textarea,select{ margin:0px; padding:0px;} input,button,option,textarea,select{ font:100% Tahoma,Helvetica,Arial,sans-serif;} textarea{ resize: none;} a{ color:#333333; text-decoration:none;} a:link{ text-decoration:none;} a:visited{ text-decoration:none;} a:hover{ text-decoration:underline;} a:active{ text-decoration:none;} table{ font-size:inherit; font:100%;} th{ font-weight:bold;} img{ border:0px;} h3{ font-size:14px; color:#000;} h4{ font-size:12px;} .clear{ clear:both; height:0px; overflow:hidden;} .section{ width:100%; clear:both;} .column{ width:100%; clear:both; overflow:hidden;} .field{ width:100%; clear:both; overflow:hidden;} /* for Firefox 去除虚线框 */ input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{ border : 0px; } /* for IE8 去除虚线框 */ input[type=submit]:focus, input[type=button]:focus{ outline : none; } /*弹出窗口全局样式*/ .popWarp{background:#111;-moz-opacity: 0.5;opacity:0.5;filter: alpha(opacity=50);position:absolute;z-index:1200;} .popWin{display:none; width:415px; background:#E4E4E4; padding:5px; position:absolute; left:40%; top:20%; z-index:1280;} .popWin .popbox{ background:#fff; border:#C4C4C4 1px solid; padding:0 4px 13px 4px;} .popWin .popbox h3{ height:36px; border-bottom:#47B030 1px solid; font-size:14px; line-height:36px; padding:0 8px; color:#000;background: #fff;} .popWin .popbox h3 b{ float:left;} .popWin .popbox h3 span{ float:right; font-weight:100; cursor:pointer;} .popWin .popbox ul{ padding:44px 0 10px 67px;} .popWin .popbox ul li{ margin-bottom:16px;} .popWin .popbox ul li span{ line-height:25px; float:left; display:block;} .popWin .popbox ul li input{ width:151px; height:20px; border:#8E9BA3 1px solid; line-height:20px;} .popWin .popbox ul li.button{ padding:36px 15px 0 0;} .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;}
本文转自曾祥展博客园博客,原文链接:http://www.cnblogs.com/zengxiangzhan/archive/2012/01/14/2322172.html,如需转载请自行联系原作者