对话框

对话框组件已经打包为单独的组件,可脱离UI总组件单独使用。
下载组件

默认效果

<button class="ui-btn ui-dialog-show">标准对话框</button>
<script>
$(function()
{
$(".ui-dialog-show").click(function()
{
var align=$(this).attr("data-align");
$.dialog(
{
title:"标题",
text:"内容",
align:align,
cancelshow:false,
ok:function(e)
{
sdcms.success('你点了确认');
e.close();
}
});
});
})
</script>

方向

<button class="ui-btn ui-dialog-show" data-align="top-left">左上角</button>
<button class="ui-btn ui-dialog-show" data-align="top-right">右上角</button>
<button class="ui-btn ui-dialog-show" data-align="bottom-left">左下角</button>
<button class="ui-btn ui-dialog-show" data-align="bottom-right">右下角</button>

扩展

<button class="ui-btn ui-dialog-input">单行文本框</button>
<button class="ui-btn ui-dialog-textarea">多行文本框</button>
<button class="ui-btn ui-dialog-iframe">框架</button>
<button class="ui-btn ui-dialog-other">不显示底部</button>
<button class="ui-btn ui-dialog-mobile-show">手机使用</button>

动画效果

<button class="ui-btn ui-dialog-am" data-am="">默认动画</button>
<button class="ui-btn ui-dialog-am" data-am="ui-am-slide-top">slide-top</button>
<button class="ui-btn ui-dialog-am" data-am="ui-am-slide-bottom">slide-bottom</button>
<button class="ui-btn ui-dialog-am" data-am="ui-am-slide-left">slide-left</button>
<button class="ui-btn ui-dialog-am" data-am="ui-am-slide-right">slide-right</button>
<button class="ui-btn ui-dialog-am" data-am="ui-am-slide-top-fixed">slide-top-fixed</button>

参数说明

参数 默认值 是否必须 参数说明
title 对话框标题
text 内容部分
align center 页面中显示的位置
time 0 定时关闭,单位:秒,为0时无定时关闭功能
ok 确定按钮的回调函数
okval 确定 确定按钮显示的文字
oktheme ui-btn-blue 确定按钮显示的CSS样式
cancel 取消按钮的回调函数
cancelval 取消 取消按钮显示的文字
cancelshow true 是否显示取消按钮
width 对话框的宽度
height 对话框的高度
inputval 单行文本框的默认值
inputholder 单行文本框的placeholder提示文字
maxlength 255 单行文本框能输入的最大长度
rows 6 多行文本框rows参数
tips 文本框下面的提示文字
type 0 对话框类型,可选(0:文字,1:单行文本框,2:多行文本框,3:框架,4:图片)
footer true 是否显示底部确认按钮、取消按钮
mask true 是否显示对话框的底部遮罩层
ismobile 0 是否显示移动端模式,可选值(0:不显示,1:显示)
am 动画样式,可选值:ui-am-slide-top,ui-am-slide-bottom,ui-am-slide-left,ui-am-slide-right,ui-am-slide-top-fixed