一.没有操作选项的对话框
预览:
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");