弹出透明遮罩窗口插件,兼容性强,界面友好!

调用:

      <script type="text/javascript">      $("#sg").html("恭喜你!真好运!获得Iphone 4s一部!");      $('#dialog1').dialog('open');      </script>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

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>

  js:  /*弹出窗口插件*/   

  (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;}  

 

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }