基于jquery扩展的弹层控件

Posted 2020-07-31

　　漂亮且超好用的弹出层事件类JS代码，支持各种对话框、弹出层等，弹出层可拖拽移动且拖拽流畅，浏览器兼容良好。可自定义内容、标题、宽高、按钮、和绑定相对应的事件简单方便的实现弹层，实现添加数据或显示详细信息等功能。

下面跟着我的步伐走

（1）准备好要显示的内容，这不仅仅是内容，也可以是html代码

（2）准备好内容之后，要记得给它取个响亮的标题，明确下主题，当然也可以不需要　

（3）是不是觉得有些时候确定和取消这两个家伙没必要出现，如果不用它们可以将舍弃，不填他们就好了　　

是不是很简单，还在等什么，快来试一下吧！！

效果如下：

以下是示例教程：

PopupDiv(options)

Contents

• PopupDiv(options)
  1. id
  2. title
  3. width
  4. height
  5. content
  6. ckBtnText
  7. normalText
  8. readyFn
  9. okFn
  10. closeFn
  11. closeMainFn

id

弹层的id

title

弹层的标题

width

弹层的宽度

height

弹层的高度

content

弹层的内容

ckBtnText

确认按钮文本内容

normalText

取消按钮文本内容

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