DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery制作彈窗提示窗口代碼分享
jquery制作彈窗提示窗口代碼分享
編輯:JavaScript綜合知識     

 jquery制作的彈窗提示窗口插件,包含多種模式。帶有回執函數值的功能,需要的朋友可以參考下

 代碼如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <!--[if IE 6]> <script type="text/javascript" src="js/iepngfix_tilebg.js"></script> <![endif]--> <script type="text/javascript"> function position(elem,l,t){     var isIE6 = !-[1,] && !window.XMLHttpRequest;     if(isIE6){         var style = elem.style,         dom  = '(document.documentElement)',         left = l - document.documentElement.scrollLeft,         top  = t - document.documentElement.scrollTop;         style.position = 'absolute';         style.removeExpression('left');         style.removeExpression('top');         style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + left + ') + "px"');         style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + top + ') + "px"');     }else{         elem.style.position = 'fixed';     } }       function scscms_alert(msg,sign,ok,can){     var c_=false;//是否已經關閉窗口,解決自動關閉與手動關閉沖突     sign=sign||"";     var s="<div id='mask_layer'></div><div id='scs_alert'><div id='alert_top'></div><div id='alert_bg'><table width='260' align='center' border='0' cellspacing='0' cellpadding='1'><tr>";     if (sign!="")s+="<td width='45'><div id='inco_"+sign+"'></div></td>";     s+="<td id='alert_txt'>"+msg+"</td></tr></table>";     if (sign=="confirm"){         s+="<a href='javascript:void(0)' id='confirm_ok'>確 定</a><a href='javascript:void(0)' id='confirm_cancel'>取 消</a>";     }else{         s+="<a href='javascript:void(0)' id='alert_ok'>確 定</a>"     }     s+="</div><div id='alert_foot'></div></div>";     $("body").append(s);     $("#scs_alert").css("margin-top",-($("#scs_alert").height()/2)+"px"); //使其垂直居中     $("#scs_alert").focus(); //獲取焦點,以防回車後無法觸發函數     position(document.getElementById('mask_layer'),0,0);     position(document.getElementById('scs_alert'),$(window).width()/2,$(window).height()/2);     if (typeof can == "number"){     //定時關閉提示         setTimeout(function(){             close_info();         },can*1000);     }     function close_info(){     //關閉提示窗口         if(!c_){         $("#mask_layer").fadeOut("fast",function(){             $("#scs_alert").remove();             $(this).remove();         });         c_=true;         }     }     $("#alert_ok").click(function(){         close_info();         if(typeof(ok)=="function")ok();     });     $("#confirm_ok").click(function(){         close_info();         if(typeof(ok)=="function")ok();     });     $("#confirm_cancel").click(function(){         close_info();         if(typeof(can)=="function")can();     });     function modal_key(e){         e = e||event;         close_info();         var code = e.which||event.keyCode;         if (code == 13 || code == 32){if(typeof(ok)=="function")ok()}         if (code == 27){if(typeof(can)=="function")can()}            }     //綁定回車與ESC鍵     if (document.attachEvent)         document.attachEvent("onkeydown", modal_key);     else         document.addEventListener("keydown", modal_key, true); } //====================================以下為測試函數=======================================// function test1(){     scscms_alert("默認提示信息"); } function test2(){     scscms_alert("成功提示信息","ok"); } function test3(){     scscms_alert("成功提示後回調函數","ok",function(){alert("回調成功!")}); } function test4(){     scscms_alert("失敗提示信息","error"); } function test5(){     scscms_alert("失敗提示信息","error",function(){alert("哦!no!")}); } function test6(){     scscms_alert("警告提示信息","warn"); } function test7(){     scscms_alert("警告提示信息","warn",function(){alert("哦!警告!")}); } function test8(){     scscms_alert("您喜歡此信息提示嗎?","confirm",function(){         scscms_alert("您選擇了喜歡,謝謝!","ok");     },function(){         scscms_alert("您選擇了不喜歡,汗!","error");     }); } function test9(){     scscms_alert("本信息3秒後自動關閉","ok","",3); } function test10(){     scscms_alert("詢問信息定時關閉提示信息,3秒後自動關閉,無取消時回調函數.不推薦使用。","confirm",function(){alert("確定回調用!")},3); } </script>  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved