一款基于jQuery外观优雅带遮罩弹出层对话框
jQuery 基于 一款 优雅 对话框 弹出 外观 遮罩
2023-09-27 14:28:19 时间
今天我们要来分享一款基于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(); }); } }; });
相关文章
- jQuery-zclip实现复制内容到剪切板
- jquery实现ajax提交form表单的方法总结(转)
- 基于jQuery图片遮罩滑动文字切换特效
- 基于jquery鼠标点击图片翻开切换效果
- 基于jQuery仿去哪儿城市选择代码
- 基于jQuery图片元素网格布局插件
- 基于jQuery鼠标悬停上下滑动导航条
- 基于jQuery果冻式按钮焦点图切换代码
- 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效
- 基于jQuery实现汉字转换成拼音代码
- 基于jquery网站左侧下拉菜单
- 基于jquery右侧悬浮加入购物车代码
- 基于jQuery头像裁剪插件cropbox
- 基于jquery tool实现的windows桌面效果
- 基于jQuery带图标的多级下拉菜单
- 一款基于jQuery的图片左右滑动焦点图
- 一款基于jQuery的全屏广告图片焦点图
- 一款基于jQuery的图片分组切换焦点图插件
- 基于html5和jquery的篮球跳动游戏
- 一款基于jQuery的带Tooltip表单验证的注册表单
- 一款基于jQuery的图片场景标注提示弹窗特效
- 一款基于jQuery带事件记录的日历插件
- 一款基于jQuery的热点新闻Tab选项卡插件
- 基于jquery和svg超炫的网页动画
- 一款基于jquery的鼠标经过图片列表特效
- 一款基于jquery实现的鼠标单击出现水波特效
- 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框