原文网址 http://stefangabos.ro/jquery/zebra-dialog/#how-to-use
界面友好,可配置属性多,可以修改css的一款弹窗工具。推荐一下
1.3..8版下载地址http://pan.baidu.com/s/1i37syot
功能特色
使用方法
1.导入css和js
< link rel="stylesheet"
href="${pageContext.request.contextPath}/style/zebra_dialog.css"
type="text/css" />
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/zebra_dialog.js"></script>
2. 调用函数
$.Zebra_Dialog('<p style="font-size:180%;position: relative;left: 4px;top: 4px;font-weight:bold;">注册成功</p>',
{'onClose' : function() {window.top.location.href = "${pageContext.request.contextPath}/index/init";},
'modal' : false,
'show_close_button':false,
'center_buttons':true,
'width':280,
});
全部的配置参数
写在前面
对于提示信息可以通过对文字格式的控制来达到控制显示效果的目的。
通过控制参数和改变css基本可以达到任何需要的显示效果
参数名 类型 解释
animation_speed_hide integer ms为单位的关闭速度,defalut 250
animation_speed_show integer ms为单位的显示速度,defalut 0
auto_close mixed ms单位后自动关闭对话框,defalut false
buttons mixed 添加自定义按钮如果设置为TRUE,使用默认的按钮。
默认为true
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly' +
'configurable dialog box plugin for jQuery', {
'type': 'question',
'title': 'Custom buttons',
'buttons': [
{caption: 'Yes', callback: function() { alert('"Yes" was clicked')}},
{caption: 'No', callback: function() { alert('"No" was clicked')}},
{caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}}
]
});
callback返回false阻止对话框关闭
设为false将不显示按钮
center_buttons boolean 设为true按钮居中。默认flase,放在左下角。
custom_class mixed 添加自己的样式,simple:.mycustom zebradialog_title{background red}
zebradialog_body。 {background: URL(“coffee_48.png”)}
“custom_class”:“MyClass”
通过修改样式可以得到自己行要的效果,范围很大。
keyboard boolean 设置为true时,按下ESC键将关闭对话框。默认是true
max_height integer 最大高度,超过会显示进度条
0的话一直增加
默认是0
message string 对话框中显示的内容
model boolean 是否显示遮盖层,默认显示true
overlay_close boolean 当遮盖层被点击时对话框关闭
默认true
overlay_opacity double 遮盖层的不透明度(0至1),默认0.9
position mixed 对话框呆的位置['left+20','right-20','bttom-20','center+20']
reposition_speed integer ms单位调整窗口大小的时间默认100
show_close_button boolean 是否显示右上角的×默认true
source mixed 通过ajax,iframe,inline添加数据
source:{'ajax ':{“URL”:' HTTP:/ / myurl COM /’,cache:false}}
source:{'iframe':{“src”:' HTTP:/ / myurl COM /’,width:460,heigth:450,scrolling:true}}
如果内联html使用$("heml1").html()
source:{'inline ':$(“# myelement”)}
title string 对话框的标题默认“”
type mixed 不需要图标设为flase默认为information
vcenter_short_message boolean 消息居中,默认true
width integer 对话框的宽度
onclose
close 调用此方法手动关闭对话框。
第一次写文章不足之处欢迎指正