在web开发中,对于浏览器默认的消息提示框(如alert,confirm等)外观无法控制,同时我们经常希望能实现一些window.open之类的弹出框,但window.open弹出框存在诸多问题,如可能被拦截,界面不美观等。
为了实现更好的界面效果和控制,于是模拟系统的消息提示框及弹出窗口实现了该组件。在外观上可以通过css进行完全的控制。
组件调用方式1(传统参数传入方式):
示例 |
调用方法 |
|
ymPrompt.alert('http://www.qq.com',null,null,'确认要提交吗?',handler) |
|
ymPrompt.succeedInfo($('txt').innerHTML,400,260,null,handler2) |
|
ymPrompt.errorInfo('操作失败!',null,null,null,handler) |
|
ymPrompt.confirmInfo('信息确认框功能测试',null,null,null,handler) |
|
ymPrompt.win('<div class=\'myContent\'>普通弹出窗口</div>',300,200,'普通弹窗测试') |
|
ymPrompt.win('http://www.163.com',500,300,'网易官方网站',handler,null,null,{id:'a'}) |
组件调用方式2(JSON方式):
示例 |
源码 |
|
ymPrompt.alert({message:'http://www.qq.com',slideShowHide:false,title:'确认要提交吗?',handler:handler}) |
|
ymPrompt.succeedInfo({message:$('txt').innerHTML,width:400,height:260,handler:handler2}) |
|
ymPrompt.errorInfo({message:'操作失败!',handler:handler}) |
|
ymPrompt.confirmInfo({message:'信息确认框功能测试',handler:handler}) |
|
ymPrompt.win({message:'普通弹出窗口',width:300,height:200,msgCls:'myContent',title:'普通弹窗测试'}) |
|
ymPrompt.win({message:'http://www.163.com',width:500,height:300,title:'网易官方网站',handler:handler,maxBtn:true,minBtn:true,iframe:true}) |
其他使用方式演示:
示例 |
源码 |
|
ymPrompt.alert() |
|
ymPrompt.alert('消息内容') |
|
ymPrompt.alert({title:'我的标题',message:'我的内容'}) |
|
ymPrompt.win({title:'iframe模式',fixPosition:true,maxBtn:true,minBtn:true,iframe:{id:'myId',name:'myName',src:'http://www.baidu.com'}}) |
|
ymPrompt.alert({title:'fixPosition使用演示',message:'我不会随滚动条一起滚动',fixPosition:false}) |
|
ymPrompt.alert({title:'dragOut使用演示',message:'我可以拖出到窗口可见区域以外',dragOut:true}) |
|
ymPrompt.alert({title:'autoClose使用演示',message:'程序控制关闭',autoClose:false,handler:autoClose}) |
|
ymPrompt.win({message:'<br><center>无标题栏</center>',handler:noTitlebar,btn:[['关闭我']],titleBar:false}) |
|
ymPrompt.win({message:'<br><center>无关闭按钮</center>',btn: ['OK'],closeBtn:false}) |
|
ymPrompt.alert({message:'不显示遮罩',title:'不显示遮罩',showMask:false}) |
|
ymPrompt.alert({message:'右下角弹出',title:'右下角弹出',winPos:'rb'}) |
|
ymPrompt.alert({message:'自定义弹出位置',title:'右下角弹出',winPos:[200,1000]}) |
|
ymPrompt.win({message:'自定义按钮',title:'自定义按钮测试',handler:testHd,btn:[['是','yes'],['否','no'],['取消','cancel']]}) |
|
ymPrompt.alert({message:'拖动窗体时的透明度为0.5',title:'自定义按钮测试',winAlpha:0.5}) |
|
ymPrompt.alert({message:'显示窗体阴影',title:'显示阴影',showShadow:true}) |
|
ymPrompt.alert({message:'窗体淡入淡出',title:'淡入淡出',useSlide:true,handler:slideHd}) |
|
ymPrompt.alert({message:'自定义淡入淡出',title:'淡入淡出',useSlide:true,slideCfg:{increment:0.1,interval:100},handler:slideHd}) |
|
ymPrompt.alert({message:'显示最大化最小化按钮',title:'最大化最小化',minBtn:true,maxBtn:true}) |
|
ymPrompt.win({message:'自定义内容样式',title:'自定义内容样式',msgCls:'customCls'}) |
|
ymPrompt.alert({message:'允许在消息框中使用右键',title:'允许右键',allowRightMenu:true}) |
|
ymPrompt.alert({message:'允许选择消息框中内容',title:'允许选择',allowSelect:true}) |
|
ymPrompt.confirmInfo({icoCls:'',msgCls:'confirm',message:'请输入您的姓名:<br><input type='text' id='myInput' onfocus='this.select()' />',title:'请输入您的名字',height:150,handler:getInput,autoClose:false})" /> |
组件方式及属性调用演示:
示例 |
源码 |
|
ymPrompt.win('<div class=fmt>版本号:'+ymPrompt.version+'<br>发布日期:'+ymPrompt.pubDate+'<br>组件当前配置信息:'+json2str(ymPrompt.cfg)+'</div>',250,500) |
|
ymPrompt.win({message:'iframe.html',width:500,height:300,title:'getPage测试',handler:handlerIframe,autoClose:false,iframe:true}) |
|
ymPrompt.alert({message:'一秒钟后我的大小改为[400,300]',height:200,width:250}); setTimeout(function(){ymPrompt.resizeWin(400,300)},1000); |
|
ymPrompt.alert({message:'两秒钟后自动点击确定按钮',handler:handler}); setTimeout(function(){ymPrompt.doHandler('ok')},1000); |
|
ymPrompt.alert({message:'点击确定显示按钮的内容',autoClose:false,btn:[['是','yes'],['否','no']],handler:getButtons}) |
|
ymPrompt.alert({message:'悬浮右下角,模拟qq',fixPosition:true,winPos:'rb',showMask:false}) |
|
ymPrompt.alert({message:'窗口状态控制',width:400,autoClose:false,btn:[['最大化','max'],['最小化','min'],['正常态','normal'],['关闭','close']],handler:stateHd}) |
|
en();ymPrompt.alert({message:'英文化成功'}) |
|
cn();ymPrompt.alert({message:'中文化成功'}) |