弹出框插件——dialog

基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器。

思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定。

注意ie6包含两个问题:
一、select、flash不能遮罩,采用iframe。
二、fixed属性采用滚动时重新计算高度或在样式中采用表达式计算expression。

源码分析:
1、creatHtml:采用doT.js初始化元素添加到body中;
2、show:设置宽度,高度,居中显示;
3、events:为关闭和确定绑定事件;
4、removeCallback:移出元素节点,如有执行回调方法;
5、ie6fixed:ie6中fixed的兼容性处理。

参数使用说明:

width:定义弹出框的宽度,默认值是400。
height:定义弹出框的高度,默认值是100.
title:定义弹出框的标题,默认值是空。
html:定义弹出框的内容,默认值是空。
type:定义弹出框的类型,默认值是default,其他conform和alert。
closed: 标题栏中的关闭按钮,回调方法,默认为null。
conform:包含name指按钮的名称,默认值为确定,callback回调方法,默认值为null。
cancel:包含name指按钮的名称,默认值为取消,callback回调方法,默认值为null。
备注:如果使用conform或alert时,不设置type类型是不起作用。


放在页面底部,作为公用部分:



使用方法:

复制代码
$.Dialog.init({
    height: 180,
    title: "弹出框",
    html: "亲,默认弹出框哦",
    closed: function() {
        alert("关闭");
    }
});
复制代码



github地址:https://github.com/benpaobenpao/dialog

DEMO:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值