手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery制作弹窗提示窗口代码分享
jquery制作弹窗提示窗口代码分享
摘要:复制代码代码如下:functionposition(elem,l,t){varisIE6=!-[1,]&&!window.XMLHttpRe...

复制代码 代码如下:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<>

<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>

【jquery制作弹窗提示窗口代码分享】相关文章:

JQuery控制Radio选中方法分析

jQuery插件制作之全局函数用法实例

JQUERY表单暂存功能插件分享

JS制作手机端自适应缩放显示

网页里控制图片大小的相关代码

纯javascript制作日历控件

jQuery封装的tab选项卡插件分享

jQuery子窗体取得父窗体元素的方法

jquery 构造函数在表单提交过程中修改数据

jQuery+ajax实现无刷新级联菜单示例

精品推荐
分类导航