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");