artDialog组件应用学习（二）

一.没有操作选项的对话框

预览：





html前台引入代码：（之后各种效果对话框引入代码致，调用方法也一样，就不一一写入）

<script type="text/javascript" src="/Scripts/Arale/sea-modules/sea.js"></script>
<script type="text/javascript">
seajs.config({
alias: {
"jquery": "jquery-1.10.2"
}
});
</script>

提示框编写代码：

//为了让对话框自动消失，自行定义的方法
function DieOut(d, time) {
setTimeout(function () {
d.close().remove();
}, time);
}

//自动关闭对话框
function SelfCloseTip(msg, width, height) {
seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
var d = dialog({
content: msg,
quickClose: true
});
d.width(width);
d.height(height);
d.show();
DieOut(d, 5000);
});
}

在前台页面调用方法：SelfCloseTip("5s后我会自动消失",300,150);

属性：

content:　　 string类型，对话框显示内容

quickClose: boolean,点击对话框外围空白处，是否快速关闭对话框，true：关闭 false：不关闭

方法：

width(value):　　number类型，对话框宽度

height(value): number类型，对话框高度

show():　　　　 显示普通对话框

close(): 关闭（隐藏）对话框

remove(): 销毁对话框,会从Dom元素中移除对话框相关节点，无法恢复

二.气泡浮层对话框

预览：



提示框编写代码：

//气泡浮层效果
function FollowBottomTip(message, follow) {
seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
var d = dialog({
align: "bottom left",
padding:8,
content: message,
quickClose: true,
});
d.show(follow);
});
}

属性：

align:　　 string类型，浮层对齐方式，默认bottom left，支持："top left", "top", "top right", "right top", "right", "right bottom", "bottom right",

"bottom", "bottom left", "left bottom", "left", "left top"(show()传入HTML对象方可生效)

padding: number类型，浮层里内容距所在容器距离（控制浮层高度）

参数follow是浮层显示位置的对象，注意，这个对象只能用javascript来获取，jquery获取无效。

var follow = document.getElementById("followid");