标签:
漂亮且超好用的弹出层事件类JS代码,支持各种对话框、弹出层等,弹出层可拖拽移动且拖拽流畅,浏览器兼容良好。可自定义内容、标题、宽高、按钮、和绑定相对应的事件简单方便的实现弹层,实现添加数据或显示详细信息等功能。
下面跟着我的步伐走
(1)准备好要显示的内容,这不仅仅是内容,也可以是html代码
(2)准备好内容之后,要记得给它取个响亮的标题,明确下主题,当然也可以不需要
(3)是不是觉得有些时候确定和取消这两个家伙没必要出现,如果不用它们可以将舍弃,不填他们就好了
是不是很简单,还在等什么,快来试一下吧!!
效果如下:
以下是示例教程:
PopupDiv(options)
readyFn()
弹出层后执行的后续操作
示例:
var pd_detail = new PopupDiv({
title: "标题",
width: 400,
okBtnText: "确定",
normalText: "否",
content: "内容",
readyFn: function () {
alert("弹出层后执行的后续操作");
}
});
展示效果:
okFn()
确定回调事件
示例:
var pd_detail = new PopupDiv({
title: "标题",
width: 400,
okBtnText: "确定",
normalText: "否",
content: "内容",
okFn: function () {
alert("确定回调事件");
}
});
展示效果:
closeFn()
点击否的后续操作
示例:
var pd_detail = new PopupDiv({
title: "标题",
width: 400,
okBtnText: "确定",
normalText: "否",
content: "内容",
closeFn: function () {
alert("点击否的后续操作");
}
});
展示效果:
closeMainFn()
关闭弹层后的后续操作
示例:
var pd_detail = new PopupDiv({
title: "标题",
width: 400,
okBtnText: "确定",
normalText: "否",
content: "内容",
closeMainFn: function () {
alert("关闭弹层后的后续操作");
}
});
展示效果:
示例:
var pd_detail = new PopupDiv();
展示效果:
示例:
var pd_detail = new PopupDiv({
title: "",
okBtnText: "",
normalText: "",
content: "",
});
展示效果:
下载地址:
JavaScript弹层控件
http://www.tiaoceng.com/assemblydetail_34.html
基于jquery扩展的弹层控件
标签:
原文地址:http://www.cnblogs.com/tiaoceng/p/5622442.html