|
May
31
|
|
|
Categories: JavaScript
| Tags: div提示框, JavaScript, jQuery
| Views: 7,101
|
前面用prototype写过一个div提示框(链接), 功能上还是有所限制. 现在用jquery改版了这个提示框, 增加的功能有:
1. N秒后自动关闭提示框
2. N关闭提示框执行一定的操作(可以设定)
3. 背景渐变暗
4. 支持ajax的get操作
5. 支持嵌入iframe
效果图可以见带即时验证的jQuery表单插件的后两张截图.
// JavaScript Document $.showAlert = function(o){ var s = { alertwidth: '360', // width alertheight: '200', //height alertautoclose: -1, // auto close alert after alertautoclose alerttitle: '提示', // title of alert alertwrapperclass: '', alerttitleclass: '', alertmainclass: '', alertcontent: 'text:', // support text: url: get: iframe: (url=get) alertbgclass: '', alertcloseevent: '' // event after close }; if(o) $.extend(s,o); var dragFlag = false; var startX = 0; var startY = 0; var main = $('<div style="padding:12px; text-align:center; color:red" id="alertmain" class="'+s.alertmainclass+'"></div>'); var title = $('<div style="background-color:#222; border:1px solid #aaa; height:18px; padding:8px 5px 5px 12px; color:white; font-weight:bold; cursor:move;" id="alerttitle" class="'+s.alerttitleclass+'"></div>'); var titlespan = $('<span style="width:'+(s.alertwidth-48)+'px; float:left;">'+s.alerttitle+'</span>'); var closespan = $('<input value=× style="border:1px solid #eee; color:#eee; background-color:#222; cursor:pointer; width:20px; margin-bottom:3px;" type=button>'); var wrapper = $('<div style="width:'+s.alertwidth+'px; height:'+s.alertheight+'px; position:absolute; top:'+(document.documentElement.clientHeight - s.alertheight)/2+'px; left:'+($('body').width() - s.alertwidth)/2+'px; z-index:10000; border:1px solid #222; background-color:white;" id="alertwrapper" class="'+s.alertwrapperclass+'"></div>'); var bg = $('<div id="alertbg" style="position:absolute; top:0; left:0; z-index:9999; background-color:#999; width:'+$('body').width()+'px; height:'+$('body').height()+'px;" class="'+s.alertbgclass+'"></div>'); if(s.alertcontent.substr(0,5) == 'text:'){ main.html(s.alertcontent.substr(5)); } else if(s.alertcontent.substr(0,4) == 'url:' || s.alertcontent.substr(0,4) == 'get:'){ var alerturl = s.alertcontent.substr(4); main.ajaxStart(function(){ main.html("Loading..."); }); $.get( alerturl, null, function(data){ main.html(data); } ); } else if(s.alertcontent.substr(0,7) == 'iframe:'){ var alertsrc = s.alertcontent.substr(7); var alertiframe = $('<iframe src="'+alertsrc+'" width="'+(s.alertwidth-25)+'" height="'+(s.alertheight-50)+'px" scrolling="auto" frameborder="0" marginheight="0" marginwidth="0"></iframe>'); alertiframe.appendTo(main); } bg.appendTo($('body')); wrapper.appendTo($('body')); title.appendTo(wrapper); titlespan.appendTo(title); titlespan.after(closespan); main.appendTo(wrapper); bg.animate({opacity:0.6}); function closealert(){ wrapper.remove(); bg.remove(); eval(s.alertcloseevent); } function autoclosealert(){ if(s.alertautoclose>=0){ titlespan.html(s.alerttitle+' <font style="font-weight:normal;color:#ff6" >'+s.alertautoclose+' 秒后自动关闭...</font>'); s.alertautoclose --; if(s.alertautoclose == -1) closealert(); } setTimeout(autoclosealert,1000); } autoclosealert(); closespan.click(function(){ closealert(); }); title.mousedown(function(e){ dragFlag = true; startX = e.pageX - parseInt(wrapper.css('left')); startY = e.pageY - parseInt(wrapper.css('top')); }); title.mousemove(function(e){ if(dragFlag){ wrapper.css('left', e.pageX - startX) .css('top', e.pageY - startY); } }); title.mouseup(function(e){ dragFlag = false; }); title.mouseout(function(e){ if(e.target == this) dragFlag = false; }); return this; }
From 迷途知返, post 又见div提示框,jQuery版
RELATED POSTS:


IE 8以下版本中不能使用
@影子008:试试3.1版本