弹出框插件——dialog

系统 1767 0

基于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


使用方法:

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



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

DEMO:


弹出框插件——dialog


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论