zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    十 mybatis逆向工程
    九 spring和mybatis整合
    八 mybatis查询缓存（一级缓存，二级缓存）和ehcache整合
    七 mybatis的延迟加载
    利用游标循环删除数据
    oracle11g空表导不出来的解决办法
    关闭启动数据库AWR功能
    数据库维护操作
    开启和关闭oracle数据库中的审计功能
    Oracle序列
  • 原文地址：https://www.cnblogs.com/xiaoxiaoshusheng/p/3227978.html
Copyright © 2011-2022 走看看