今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框、确认框等。更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件,用起来非常方便。

在线预览   源码下载

实现的代码。

html代码:

 <center class="demo">
<button onclick="payment();">缴费提示层</button>
<button onclick="Confirm();">确认框提示层</button>
<button onclick="Alert();">alert提示层</button>
<button class="delOrder" item_id="123">删除商品提示层</button>
</center>

js代码:

  //是否缴费完成
function payment() {
qikoo.dialog.payNotice(function () {
alert("已完成缴费按钮"); //已缴费完成的提示
}, function () {
alert("你点了缴费遇到问题按钮"); //缴费遇到问题的提示
}, function () {
alert("你点了关闭按钮"); //关闭按钮的提示
});
} function Confirm() {
qikoo.dialog.confirm('确定要删除此商品吗?', function () {
alert("删除啦!"); }, function () {
alert("取消啦!");
});
} function Alert() {
qikoo.dialog.alert("站长素材 - sc.chinaz.com");
} $(document).ready(function () {
$(".delOrder").click(function (e) {
_this = $(e.target);
tips.cartTip(_this);
});
var tips = {
cartTip: function (_this) {
var tpl = [
'<div class="dialog-delorder">',
'<div class="dialog-bar">',
'温馨提示',
'<a href="#" onclick="return false;" class="dialog-close" title="关闭"></a>',
'</div>',
'<div class="dialog-content">',
'<p>确定从购物车中删除此商品?</p>',
'</div>',
'<div class="dialog-console">',
'<a class="console-btn-confirm" href="#" onclick="return false;" title="确定">确定</a>',
'<a class="console-btn-cancel" href="#" onclick="return false;" title="取消">取消</a>',
'</div>',
'</div>'
].join('');
var dialogEle = $(tpl).appendTo('body');
var mainEle = dialogEle.filter('.dialog-delorder');
var top = _this.offset().top + 20;
var left = _this.offset().left;
mainEle.css('top', top);
mainEle.css('left', left);
dialogEle.filter('.dialog-bg').css('height', $(document).height());
dialogEle.find('a.console-btn-confirm').click(function () {
tips.warTip("ID为 " + _this.attr("item_id") + " 的商品已经被删除了!");
$(".dialog-delorder").remove();
});
dialogEle.find('a.console-btn-cancel,a.dialog-close').click(function () {
$(".dialog-delorder").remove();
});
},
warTip: function (txt) {
var tpl = [
'<div class="dialog-war">',
'<div class="dialog-bar">',
'提示',
'<a href="#" onclick="return false;" class="dialog-close" title="关闭"></a>',
'</div>',
'<div class="dialog-content">',
'<p>' + txt + '</p>',
'<div class="dialog-console">',
'<a class="console-btn-confirm" href="#" onclick="return false;" title="确定">确定</a>',
'</div>',
'</div>',
'</div>'
].join('');
var dialogEle = $(tpl).appendTo('body');
var mainEle = dialogEle.filter('.dialog-war');
var left = ($(window).width() - mainEle.width()) / 2;
mainEle.css('left', left);
mainEle.css('top', '200px');
dialogEle.filter('.dialog-bg').css('height', $(document).height());
dialogEle.find('a.dialog-close,a.console-btn-confirm').click(function () {
$(".dialog-war").remove();
});
}
};
});

via:http://www.w2bc.com/Article/25539

一款基于jQuery外观优雅带遮罩弹出层对话框的更多相关文章

  1. 基于jQuery点击圆形边框弹出图片信息

    分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=&q ...

  2. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  3. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  4. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  5. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  6. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  7. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  8. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  9. jquery简易版xwPop.js弹出消息对话框插件

    xwPop.js弹出消息对话框插件是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹出对话框,它提供各种参数和方法,功能非常强大.目前已经在项目中有应用到xwpop开发 ...

随机推荐

  1. java学习笔记11--集合总结

    java学习笔记系列: java学习笔记10--泛型总结 java学习笔记9--内部类总结 java学习笔记8--接口总结 java学习笔记7--抽象类与抽象方法 java学习笔记6--类的继承.Ob ...

  2. windows live writer首行缩进问题的解决

    使用live writer写博客的确方便,但有个简单的问题,我始终无法解决,就是发布的博客老是无法首行缩进,试过好多方法,都有问题: 直接加全角空格.上传时就给过滤掉了. 修改defaultcss,结 ...

  3. PHP快速入门 如何配置Apache服务器

    点击安装Apache,一直下一步 填写域名(Network Domain),服务器名(Server Name),和管理员邮箱(三条都可以任意填写) 下一步的时候选择(Custom),然后在Apache ...

  4. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  5. Unity骨骼动力学应用

    原地址:http://blog.csdn.net/libeifs/article/details/7169794 开发环境 Window7 Unity3D  3.4.1 MB525defy Andro ...

  6. java防止sql注入

    public final static String filterSQLInjection(String s) { if (s == null || "".equals(s)) { ...

  7. 【Linux】head命令

    用途 它是用来显示开头或结尾某个数量的文字区块 全称 head的全称即为head 参数 -q :隐藏文件名 -v :显示文件名 -c :<字节>显示字节数 -n :<行数>显示 ...

  8. 聊聊iClient for Leaflet坐标转换问题

    作者:非法小恋 背景 SuperMap iClient for JavaScript 9D产品想必大伙都用了一段时间了,针对新推出的三款客户端产品,Leaflet,OpenLayaers,Mapbox ...

  9. (一)《Spring实战》——Spring核心

    <Spring实战>(第4版) 第一章:Spring之旅 1. 简化Java开发 为了降低Java开发的复杂性,Spring采取了以下4种关键策略: 基于POJO的轻量级和最小侵入性编程: ...

  10. JavaScript 参考教程

    JavaScript 是使用“对象化编程”的,或者叫“面向对象编程”的.所谓“对象化编程”,意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所 ...