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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>dialog弹出框benpaobenpao</title>
<style>
*{margin:0px;padding: 0px;}
.clearfix{*zoom:1;}
.clearfix:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
.dialogbg{display:block; *zoom:1; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; opacity: 0.35;filter:alpha(opacity=30); background: #ccc;z-index: 9999;}
.dialogbox{position: fixed;_position: absolute;-webkit-box-shadow: 0px 0px 6px #999;border: 1px solid #ccc;box-shadow: 0px 0px 3px #999;border-radius: 6px; z-index: 99999;left: 50%;top: 50%;background: #f5fffa;overflow: hidden;}
.dialogboxrunstart{-webkit-transform: scale(0px,0px);-webkit-transition:all 0.2s ease-in-out;-moz-transform: scale(0px,0px);-moz-transition:all 0.2s ease-in-out;-ms-transform: scale(0px,0px);-ms-transition:all 0.2s ease-in-out;-o-transform: scale(0px,0px);-o-transition:all 0.2s ease-in-out;transform: scale(0px,0px);transition:all 0.2s ease-in-out;}
.dialogtit{position: relative;height: 30px; line-height: 30px; overflow: hidden;padding: 0px 10px;border-bottom: 1px solid #274863;font-size: 16px;background: #4682b4;}
.dialogclosed{position: absolute;right: 10px;color: #fff;font-weight: 700;font-size: 20px;cursor: pointer;}
.dialogclosed:hover{color: #f00;}
.dialogtxt{color: #fff;font-weight: 700;margin-right: 20px;}
.dialogmain{padding: 10px 20px 10px 20px;}
.dialogBtns{text-align: center;padding-top: 5px;}
.dialogconform,.dialogcancel{display: inline-block;*display: inline;*zoom:1;padding: 0px 10px;height: 24px;line-height: 24px;color: #fff;font-size: 12px;border-radius: 4px;background: #005eac;border-width: 1px;border-style: solid;border-color: #b8d4e8 #124680 #124680 #b8d4e8;cursor: pointer;}
.dialogcancel{margin-left: 10px;}
.dialogconform:hover,.dialogcancel:hover{background: #0000ff;}

</style>
<script src="http://files.cnblogs.com/kuikui/jquery-1.10.2.min.js"></script>
<script src="http://files.cnblogs.com/kuikui/dot.min.js"></script>
<style>
body{height: 1500px;}
.main{width: 960px; margin: 60px auto 0px; }
.main .btn{width: 100px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;}
.mtable{ height: 100px; overflow-y: auto;}
.mtable table{width: 100%; text-align: center;}
.mtable table th, .mtable table td{padding:10px 0px;}
</style>
</head>
<body>
<div class="main">
<div>
<img src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" />
<select><option>one</option><option>two</option></select>
弹出框插件测试。。。
</div>
<div>
点击测试：
<input class="btn" id="btndef" type="button" value="default" />
<input class="btn" id="btnconf" type="button" value="confirm" />
<input class="btn" id="btnal" type="button" value="alert" />
<p>使用conform、alert必须制定其type类型，type默认值是default。</p>
</div>
</div>

<script id="arrtmpl" type="text/x-dot-template">
<div class="mtable">
<table >
<thead>
<tr>
<th>第一项</th>
<th>第二项</th>
<th>第三项</th>
</tr>
</thead>
<tbody>
{{~it.array:value:index }}
<tr>
<td>{{= value.one }}</td><td>{{= value.two }}</td><td>{{= value.three }}</td>
</tr>
{{~}}
</tbody>
</table>
</div>
</script>

<script id="dialogtmpl" type="text/x-dot-template">
{{? it.isIE6===false }}
<div id="dialogbg" class="dialogbg"></div>
{{?? }}
<iframe id="dialogbg" class="dialogbg"></iframe>
{{?}}
<div id="dialogbox" class="dialogbox">
<div class="dialogcont">
<div class="dialogtit clearfix">
<a class="dialogclosed" title="关闭">⊗</a>
<div class="dialogtxt">{{=it.title}}</div>
</div>
<div class="dialogmain">{{=it.html}}</div>
{{? it.type === "conform"}}
<div class="dialogBtns"><a class="dialogconform">{{=it.conform.name||"确定"}}</a></div>
{{?? it.type === "alert"}}
<div class="dialogBtns"><a class="dialogconform">{{=it.conform.name||"确定"}}</a><a class="dialogcancel">{{=it.cancel.name||"取消"}}</a></div>
{{?}}
</div>
</div>
</script>

<script>
(function($) {
$.Dialog = {
init: function(options) {
var _this = this,
defaults = {
width: "400",
height: "100",
title: "",
html: "",
type: "default", // default conform alert
closed: null,
conform: {
name: "确定",
callback: null
},
cancel: {
name: "取消",
callback: null
}
};
options.isIE6 = !! window.ActiveXObject && !window.XMLHttpRequest;
_this.options = $.extend({}, defaults, options);
_this.creatHtml();
_this.show();
_this.events();
if(_this.options.isIE6){
_this.ie6fixed();
}
},
creatHtml: function() {
var _this = this;
var interText = doT.template($("#dialogtmpl")[0].text);
$("body").append(interText(_this.options));
},
show: function() {
var _this = this;
_this.dialogbg = $("#dialogbg");
_this.dialogbox = $("#dialogbox");

_this.dialogbg.css({
"height": $(document).height()
});

_this.dialogbox.css({
"margin-top": (-_this.options.height / 2) + "px",
"margin-left": (-_this.options.width / 2) + "px",
"width": _this.options.width + "px",
"height": _this.options.height + "px"
});

_this.dialogbox.addClass("dialogboxrunstart");
},
events: function() {
var _this = this;
_this.dialogclosed = _this.dialogbox.find(".dialogclosed");
_this.dialogconform = _this.dialogbox.find(".dialogconform");
_this.dialogcancel = _this.dialogbox.find(".dialogcancel");

_this.dialogclosed.on("click", function() {
_this.removeCallback(_this.options.closed);
});

_this.dialogconform.on("click", function() {
_this.removeCallback(_this.options.conform.callback);
});

_this.dialogcancel.on("click", function() {
_this.removeCallback(_this.options.cancel.callback);
});
},
removeCallback: function(call) {
var _this = this;
_this.dialogbg.remove();
_this.dialogbox.remove(); !! call && call();
},
ie6fixed: function() {
var _this = this;
$(window).scroll(function() {
_this.dialogbox.css({
"top": (($(window).height() - _this.options.height) / 2 + $(document).scrollTop()) + "px"
});
});
}
}
})(jQuery);
</script>

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

$("#btnconf").click(function() {
$.Dialog.init({
height: 100,
html: "",
type: "conform",
conform: {
name: "确认按钮哦哦哦哦"
}
});
});

$("#btnal").click(function() {
var arr = {
"array": [{
"one": "1",
"two": "2",
"three": "3"
}, {
"one": "11",
"two": "22",
"three": "33"
}, {
"one": "111",
"two": "222",
"three": "333"
}, {
"one": "1111",
"two": "2222",
"three": "3333"
}, {
"one": "11111",
"two": "22222",
"three": "33333"
}, {
"one": "111111",
"two": "222222",
"three": "333333"
}]
};
var interText = doT.template($("#arrtmpl")[0].text);
var html = interText(arr);
$.Dialog.init({
height: 190,
html: html,
type: "alert",
conform: {
callback: function() {
alert("确定");
}
},
cancel: {
callback: function() {
alert("取消");
}
}
});
});

})(jQuery);
</script>
</body>
</html>

运行代码

弹出框插件——dialog的更多相关文章

  1. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  2. JS弹出框插件zDialog再次封装

    zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...

  3. jQuery+css3弹出框插件

    先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var ...

  4. Android--自定义弹出框-自定义dialog

    项目要用到弹出框,还要和苹果的样式一样(Android真是没地位),所以就自己定义了一个,不是很像(主要是没图),但是也还可以. 废话不多说了,直接上代码 1.先看布局文件 <?xml vers ...

  5. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  6. layer弹出框插件参数及方法介绍

    layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...

  7. jQuery zxxbox弹出框插件(v3.0)

    插件地址: http://www.zhangxinxu.com/study/201009/jquery-zxxbox-v3-demo.html

  8. bootbox弹出框插件

    具体用法查看官网http://bootboxjs.com/examples.html {% load staticfiles %} <!DOCTYPE html> <html lan ...

  9. BootStrap弹出框插件popover简单实例

    1.网上实例地址 http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html 2.具体demo     $("#pieId&q ...

随机推荐

  1. git配置SSH Key，上传本地代码至github

    git配置全局的name和email git config --global user.name "name" git config --global user.email &qu ...

  2. 探讨后端选型中不同语言及对应的Web框架

    在进行后端选型的时候,实际上我们要选择的是一个框架.后端领域所使用的技术和框架已经趋于稳定,我们只需要按我们的需要选择所需要的框架.当存在多个框架适合时,我们再选择适合的语言.不得不指出的是,当我们喜 ...

  3. J-Link GDB Server Command

    J-Link GDB Server - SEGGER Hilden, Germany – September 15th, 2011 – SEGGER Microcontroller today ann ...

  4. Sallen-Key Active Butterworth Low Pass Filter Calculator

    RC 2nd Order Passive Low Pass Filter The cut-off frequency of second order low pass filter is given ...

  5. Layout Inflation ：Unconditional layout, inflation from view adapter

    Layout inflation在Android上下文环境下转换XML文件成View结构对象的时候需要用到. LayoutInflater这个对象在Android的SDK中很常见,但是你绝对没想到竟然 ...

  6. [Android Pro] 关于Android 7.0无法进行https抓包的问题

    cp from  : https://www.cnblogs.com/wytings/p/6954293.html 在App进行数据请求的时候,如果每次都打印log去判断是一件很不“人性化”的操作行为 ...

  7. ThreadLocal 简介 案例 源码分析 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. Cache Line 伪共享发现与优化

    https://yq.aliyun.com/articles/465504 Cache Line 伪共享发现与优化 作者:吴一昊,杨勇 1. 关于本文 本文基于 Joe Mario 的一篇博客 改编而 ...

  9. pycharm调整代码长度分割线

    1.File ->  Settings  ->  Code Style -> Right margin (columns) 的值为80,大功告成. 2.具体设置的数值可以根据个人电脑 ...

  10. ZOJ 3827 Information Entropy 水

    水 Information Entropy Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge Informati ...