文档章节

confirm美化

446474272
 446474272
发布于 2017/05/03 09:53
字数 545
阅读 3
收藏 0
点赞 0
评论 0

转的别人的,改了下样式,以后可以自己用

 

jq部分

<script>
            (function($) {

                $.alerts = {
                    alert: function(title, message, callback) {
                        if(title == null) title = 'Alert';
                        $.alerts._show(title, message, null, 'alert', function(result) {
                            if(callback) callback(result);
                        });
                    },

                    confirm: function(title, message, callback) {
                        if(title == null) title = 'Confirm';
                        $.alerts._show(title, message, null, 'confirm', function(result) {
                            if(callback) callback(result);
                        });
                    },

                    _show: function(title, msg, value, type, callback) {

                        var _html = "";

                        _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';
                        _html += '<div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
                        if(type == "alert") {
                            _html += '<input id="mb_btn_ok" type="button" value="确定" />';
                        }
                        if(type == "confirm") {
                            _html += '<input id="mb_btn_ok" type="button" value="确定" />';
                            _html += '<input id="mb_btn_no" type="button" value="取消" />';
                        }
                        _html += '</div></div>';

                        //必须先将_html添加到body,再设置Css样式  
                        $("body").append(_html);
                        GenerateCss();

                        switch(type) {
                            case 'alert':

                                $("#mb_btn_ok").click(function() {
                                    $.alerts._hide();
                                    callback(true);
                                });
                                $("#mb_btn_ok").focus().keypress(function(e) {
                                    if(e.keyCode == 13 || e.keyCode == 27) $("#mb_btn_ok").trigger('click');
                                });
                                break;
                            case 'confirm':

                                $("#mb_btn_ok").click(function() {
                                    $.alerts._hide();
                                    if(callback) callback(true);
                                });
                                $("#mb_btn_no").click(function() {
                                    $.alerts._hide();
                                    if(callback) callback(false);
                                });
                                $("#mb_btn_no").focus();
                                $("#mb_btn_ok, #mb_btn_no").keypress(function(e) {
                                    if(e.keyCode == 13) $("#mb_btn_ok").trigger('click');
                                    if(e.keyCode == 27) $("#mb_btn_no").trigger('click');
                                });
                                break;

                        }
                    },
                    _hide: function() {
                        $("#mb_box,#mb_con").remove();
                    }
                }
                // Shortuct functions  
                zdalert = function(title, message, callback) {
                    $.alerts.alert(title, message, callback);
                }

                zdconfirm = function(title, message, callback) {
                    $.alerts.confirm(title, message, callback);
                };
                var GenerateCss = function() {

                    $("#mb_box").css({
                        width: '100%',
                        height: '100%',
                        zIndex: '99999',
                        position: 'fixed',
                        filter: 'Alpha(opacity=60)',
                        backgroundColor: 'black',
                        top: '0',
                        left: '0',
                        opacity: '0.6'
                    });

                    $("#mb_con").css({
                        zIndex: '999999',
                        width: '300px',
                        position: 'fixed',
                        backgroundColor: 'White',
                        borderRadius: '3px'
                    });

                    $("#mb_tit").css({
                        display: 'block',
                        fontSize: '14px',
                        color: '#444',
                        padding: '10px 15px',
                        backgroundColor: '#DDD',
                        borderRadius: '3px 3px 0 0',
                        fontWeight: 'bold'
                    });

                    $("#mb_msg").css({
                        padding: '20px',
                        lineHeight: '20px',
                        borderBottom: '1px dashed #DDD',
                        fontSize: '13px'
                    });

                    $("#mb_ico").css({
                        display: 'block',
                        position: 'absolute',
                        right: '10px',
                        top: '9px',
                        border: '1px solid Gray',
                        width: '18px',
                        height: '18px',
                        textAlign: 'center',
                        lineHeight: '16px',
                        cursor: 'pointer',
                        borderRadius: '12px',
                        fontFamily: '微软雅黑'
                    });

                    $("#mb_btnbox").css({
                        margin: '15px 0 10px 0',
                        textAlign: 'center'
                    });
                    $("#mb_btn_ok,#mb_btn_no").css({
                        width: '85px',
                        height: '30px',
                        color: 'white',
                        border: 'none'
                    });
                    $("#mb_btn_ok").css({
                        backgroundColor: '#168bbb'
                    });
                    $("#mb_btn_no").css({
                        backgroundColor: 'gray',
                        marginLeft: '20px'
                    });

                    //右上角关闭按钮hover样式  
                    $("#mb_ico").hover(function() {
                        $(this).css({
                            backgroundColor: 'Red',
                            color: 'White'
                        });
                    }, function() {
                        $(this).css({
                            backgroundColor: '#DDD',
                            color: 'black'
                        });
                    });

                    var _widht = document.documentElement.clientWidth; //屏幕宽  
                    var _height = document.documentElement.clientHeight; //屏幕高  

                    var boxWidth = $("#mb_con").width();
                    var boxHeight = $("#mb_con").height();

                    //让提示框居中  
                    $("#mb_con").css({
                        top: (_height - boxHeight) / 2 + "px",
                        left: (_widht - boxWidth) / 2 + "px"
                    });
                }

            })(jQuery);
        </script>

<script type="text/javascript">
            $("#add").bind("click", function() {
                        // $.MsgBox.Alert("消息", "哈哈,添加成功!");  

                        zdalert('提示', '提示信息', function() {

                            //要回调的方法  

                        });
            })

                        //也可以传方法名 test  
            $("#update").bind("click", function() {

                            // $.MsgBox.Confirm("温馨提示", "确定要进行修改吗?", test);  

                            zdconfirm('提示', '确认提交该条数据吗', function(r) {
                                if(r) {
                                    //...点确定之后执行的内容  

                                }
                            });

                });
        </script>

html部分

<input id="add" type="button" value="添加" />
        <input id="update" type="button" value="修改" />

本文转载自:http://blog.csdn.net/shiyuqiong/article/details/51583811

共有 人打赏支持
446474272
粉丝 0
博文 1
码字总数 0
作品 0
成都
程序员
分享4年工作中整理的javascript

demo:http://www.yxsss.com/ui/ 主要包含: 1、基本方法: 如:ajax,js读写cookie,创建对象,删除对象,序列化form的内容,产生是随机数…… 2、表单自动验证 如:必须填写的信息 加个 re...

洞悉 ⋅ 2012/12/26 ⋅ 4

PL/SQL7中的SQL美化器设置

一、我的环境 1、操作系统版本:Windows 7 旗舰版,Service Pack 1 2、PL/SQL版本:7.0.1.1066 20000.0915 二、设置方法 1、在“编辑”菜单中找到“PL/SQL美化器选项” 2、如果已经有规则文件...

北风其凉 ⋅ 2015/08/24 ⋅ 0

css input[type=file] 样式美化,input上传按钮美化_已迁移

由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[type=file] 样式美化,input上传按钮美化。 我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进...

鬼谷子灬 ⋅ 2016/07/22 ⋅ 0

美图吴欣鸿预测未来十年趋势 AI 技术占一半

5月18日,美图公司在北京举办“美图秀秀十年分享派对”。美图公司创始人兼CEO吴欣鸿提出了美与社交的战略布局,并预测了图片影像领域十大趋势。 吴欣鸿首先回顾了美图秀秀十年历程—— 2008...

技术小能手 ⋅ 05/21 ⋅ 0

select下拉菜单美化简单美化效果

默认状态下的select下拉菜单简直是丑爆了,所以下面就介绍一下一个简单的方式对select下拉菜单进行美化,下面就是一段这样的代码实例,当然也不够美观,这里只是提供一种美化的思路,在实际应...

青衫无名 ⋅ 03/01 ⋅ 0

默认input=file样式美化的bug及解决

做项目的时候,需要美化上传控件。之前的做法一直是把默认的input设置为透明,然后在input上面放美化的图片。但是昨天发现一个小bug,在上传按钮很小的时候,input标签无法调整大小,导致美化...

_好久不见 ⋅ 2016/04/06 ⋅ 0

EasyUI 1.5.x Of Insdep Theme 1.0.0 正式版发布

jQuery EasyUI 1.5.x of insdep theme 更新截图请移至下方,附部分美化截图 关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、...

magicweng ⋅ 2017/03/20 ⋅ 11

主题优化包--JQuery EasyUI 1.5.x Of Insdep Theme

jQuery EasyUI 1.5.x of insdep theme 1.0.0 正式版 更新截图请移至下方,附部分美化截图 关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcha...

magicweng ⋅ 2017/02/13 ⋅ 10

美化自己的博客

注意事项 使用前请开启js权限 . 标题美化 标题美化效果: . 控件的选取 选取链接: http://abowman.com/ 很多flash 控件 . 生成博文目录导航 http://www.cnblogs.com/xdp-gacl/p/3718879.html...

---dgw博客 ⋅ 2017/10/14 ⋅ 0

KDE 文件夹美化工具--Dolphin Folder Color

Dolphin Folder Color 是 KDE 文件夹美化工具,是一个能快速为文件夹美化的“上下文菜单”,如今它也可以对选定的“文件夹集”进行美化! ### 安装### 你仅仅需要单击运行脚本install.sh ,之...

叶秀兰 ⋅ 2014/09/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部