自定义提示框(alert、confirm 可自定义标题 内容 图标 取消按钮)
2012-05-23 14:30
495 查看
声明:本例子是基于自定义confirm对话框 做的修改
效果:
源代码示例下载
![](http://pic002.cnblogs.com/images/2012/362463/2012052314194688.png)
![](http://pic002.cnblogs.com/images/2012/362463/2012052314195957.png)
![](http://pic002.cnblogs.com/images/2012/362463/2012052314201659.png)
![](http://pic002.cnblogs.com/images/2012/362463/2012052314202678.png)
【主函数】
1、msgbox(title,text,func,cancel,focus,icon)
参数说明:
title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常
text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
cancel :弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上
icon :弹出对话框的图标
声明:本例子是基于自定义confirm对话框 做的修改
源代码示例下载
效果:
源代码示例下载
![](http://pic002.cnblogs.com/images/2012/362463/2012052314194688.png)
![](http://pic002.cnblogs.com/images/2012/362463/2012052314195957.png)
![](http://pic002.cnblogs.com/images/2012/362463/2012052314201659.png)
![](http://pic002.cnblogs.com/images/2012/362463/2012052314202678.png)
【主函数】
1、msgbox(title,text,func,cancel,focus,icon)
参数说明:
title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常
text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
cancel :弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上
icon :弹出对话框的图标
<p> <input onclick="msgbox('提示','请至少选择一项需要删除的记录!','',null,0,'Warning')" type="button" value="提示" /> <input onclick="msgbox('提示','操作执行成功!','',null,0,'true')" type="button" value="操作成功" /> <input onclick="msgbox('提示','操作执行失败!','',null,0,'error')" type="button" value="操作失败" /> <input onclick="msgbox('确认删除么?','点击确认执行删除操作,点击取消不再执行操作!','msgbox(\'操作提示\',\'删除成功!\',\'\',null,0,\'true\')',1,1,'Warning')" type="button" value="confirm" /> </p> <script type="text/javascript" language="javascript">// <![CDATA[ function msgbox(title,content,func,cancel,focus,icon){ /* 参数列表说明: title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常 text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义 func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。 cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示 focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上 icon :弹出对话框的图标 Author:Jedliu Blog :Jedliu.cublog.cn 【网页转载请保留版权信息,实际使用时可以除去该信息】 */ icon="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/t_msgbox_"+icon+".png"; create_mask(); var temp="<div style=\"width:300px;border: 2px solid #37B6D1;background-color: #fff; font-weight: bold;font-size: 12px;\" >" +"<div style=\"line-height:25px; padding:0px 5px; background-color: #37B6D1;\">"+title+"</div>" +"<table cellspacing=\"0\" border=\"0\"><tr><td style=\" padding:0px 0px 0px 20px; \"><img src=\""+icon+"\" width=\"64\" height=\"64\"></td>" +"<td ><div style=\"background-color: #fff; font-weight: bold;font-size: 12px;padding:20px 0px ; text-align:left;\">"+content +"</div></td></tr></table>" +"<div style=\"text-align:center; padding:0px 0px 20px;background-color: #fff;\"><input type='button' style=\"border:1px solid #CCC; background-color:#CCC; width:50px; height:25px;\" value='确定'id=\"msgconfirmb\" onclick=\"remove();"+func+";\">"; if(null!=cancel){temp+=" <input type='button' style=\"border:1px solid #CCC; background-color:#CCC; width:50px; height:25px;\" value='取消' id=\"msgcancelb\" onClick='remove()'>";} temp+="</div></div>"; create_msgbox(400,200,temp); if(focus==0||focus=="0"||null==focus){document.getElementById("msgconfirmb").focus();} else if(focus==1||focus=="1"){document.getElementById("msgcancelb").focus();} } function get_width(){ return (document.body.clientWidth+document.body.scrollLeft); } function get_height(){ return (document.body.clientHeight+document.body.scrollTop); } function get_left(w){ var bw=document.body.clientWidth; var bh=document.body.clientHeight; w=parseFloat(w); return (bw/2-w/2+document.body.scrollLeft); } function get_top(h){ var bw=document.body.clientWidth; var bh=document.body.clientHeight; h=parseFloat(h); return (bh/2-h/2+document.body.scrollTop); } function create_mask(){//创建遮罩层的函数 var mask=document.createElement("div"); mask.id="mask"; mask.style.position="absolute"; mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置 mask.style.opacity=0.4;//Mozilla的不透明设置 mask.style.background="black"; mask.style.top="0px"; mask.style.left="0px"; mask.style.width=get_width(); mask.style.height=get_height(); mask.style.zIndex=1000; document.body.appendChild(mask); } function create_msgbox(w,h,t){//创建弹出对话框的函数 var box=document.createElement("div") ; box.id="msgbox"; box.style.position="absolute"; box.style.width=w; box.style.height=h; box.style.overflow="visible"; box.innerHTML=t; box.style.zIndex=1001; document.body.appendChild(box); re_pos(); } function re_mask(){ /* 更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容 */ var mask=document.getElementById("mask") ; if(null==mask)return; mask.style.width=get_width()+"px"; mask.style.height=get_height()+"px"; } function re_pos(){ /* 更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间 */ var box=document.getElementById("msgbox"); if(null!=box){ var w=box.style.width; var h=box.style.height; box.style.left=get_left(w)+"px"; box.style.top=get_top(h)+"px"; } } function remove(){ /* 清除遮罩层以及弹出的对话框 */ var mask=document.getElementById("mask"); var msgbox=document.getElementById("msgbox"); if(null==mask&&null==msgbox)return; document.body.removeChild(mask); document.body.removeChild(msgbox); } function re_show(){ /* 重新显示遮罩层以及弹出窗口元素 */ re_pos(); re_mask(); } function load_func(){ /* 加载函数,覆盖window的onresize和onscroll函数 */ window.onresize=re_show; window.onscroll=re_show; } // ]]></script>
声明:本例子是基于自定义confirm对话框 做的修改
源代码示例下载
相关文章推荐
- 自定义提示框(alert、confirm 可自定义标题 内容 图标 取消按钮)
- 自定义提示框(alert、confirm 可自定义标题 内容 图标 取消按钮)
- UIWebView 自定义网页中的alert和confirm提示框风格
- windialog 调用方法 win.Alert(str1,str2);//str1:标题,str2:提示内容
- 表单提交按钮,弹出alert提示,选择取消,页面不刷新
- 使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- 【原创】使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- UIWebView 自定义网页中的alert和confirm提示框风格
- 使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- 加强的alert confirm js自定义对话框 多个按钮 ICO自定义
- 自定义UISearchBar背景、边框、左侧图标、删除图标、取消按钮
- 关于如何自定义AlertDialog的标题、内容以及按钮
- 加强的alert confirm js自定义对话框 多个按钮 ICO自定义
- 【原创】使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- 类似alert与confirm的自定义提示框样式
- UISearchDisplayController 自定义取消按钮标题
- jquery-confirm自定义alert插件,alert显示内容可以换行
- 【原创】使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- UIWebView 自定义网页中的alert和confirm提示框风格