一款基于jQuery外观优雅带遮罩弹出层对话框

今天我们要来分享一款基于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

时间: 2024-10-16 13:07:57

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

基于jQuery+CSS3点击动画弹出表单代码

分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog" id="uploadDial

jQuery Dialog弹出层对话框插件

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js 1 /** 2 * jQuery的Dialog插件. 3 * 4 * @param object content 5 * @param object options 选项. 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值. 11 title:'标题', // 标

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

要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并且遮罩层笼罩整个页面,使整个页面的其他元素暂时失去行为. 遮罩层的实现:相对于body绝对定位,宽度和高度都和body相同,并且有一定的透明度,使得下面的元素能够被看到.原先的元素的z-index为0,遮罩层的z-index在弹出登录小窗口和原先元素的之间. 说的不是很清楚,还是看代码吧! <!DO

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

昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn').find('.assess').unbind().bind('click',function(event){                    //取消事件冒泡                      event.stopPropagation(); if($('.abtnBox').is

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

http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"></scri

jQuery点击空白关闭弹出层

给宝箱加上click事件,单击切换弹出层显示与隐藏,弹出层显示后单机任何地方都能让它关闭. 这里用到了one()指令,给body绑定一个单次的操作,jQuery代码如下: $('#info li:eq(0)').click(function(){ $('#iphone').toggle(); $('body').one('click',function(){ $('#iphone').hide(); }) return false; }) 实际上该处应该是点击非自身的空白(弹出层也算自身)关闭弹

magnific-popup 一款优秀, 多种功能于一身的弹出层jQuery插件.

功能很强大:灯箱, 画廊, 放大图片, 弹出Youtube GoogleMap, ajax读取popup等等文档:http://dimsemenov.com/plugins/magnific-popup/documentation.htmlExamples:http://dimsemenov.com/plugins/magnific-popup/

jQuery mobile 中div圆角弹出层

HTML: <div id="div_layer" class="div_layer"> 已经是最后一个题目 </div> CSS: .div_layer { left: 0; right: 0; position: fixed; z-index: 1001; margin: auto; bottom: 100px; display: none; color: white; background-color: black; -moz-bord

10款基于jquery的web前端动画特效

1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画,鼠标滑过图片时即可展开,并且图片上方有文字标题,非常实用. 在线演示 源码下载 2.jQuery/CSS3渐变颜色拾取器 之前我们向大家分享过一款功能十分强大的jQuery颜色拾取器,支持透明度的选取.今天要为大家介绍的同样是一款基于jQuer