文档章节

confirm美化

446474272
 446474272
发布于 2017/05/03 09:53
字数 545
阅读 3
收藏 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
167
4
【全网最全的博客美化系列教程】01.添加Github项目链接

全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客...

Angel_Kitty
07/21
0
0
【全网最全的博客美化系列教程】02.添加QQ交谈链接

全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客...

Angel_Kitty
07/22
0
0
【全网最全的博客美化系列教程】04.访客量统计的实现

全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客...

Angel_Kitty
07/24
0
0
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
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 反向跟踪

当反向跟踪(Trackback )被启用后,在任何你链接到可用启用自动发现功能的外部页面中,Confluence 将会自动发送一个方向跟踪 ping,这个 ping 能通知链接的页面有了内容改变。 Confluence 页...

honeymose
8分钟前
0
0
日期和时间API - 读《Java 8实战》

日期与时间 LocalDate 创建一个LocalDate对象并读取其值 // 根据年月日创建日期LocalDate date1 = LocalDate.of(2014, 3, 18);// 读取System.out.println(date1.getYear()); // 2014Sys...

yysue
16分钟前
0
0
8月15日任务

8月15日任务 Memcached命令行 • telnet 127.0.0.1 11211 • set key2 0 30 2 ab STORED get key2 VALUE key2 0 2 ab END 实例: [root@localhost 02]# telnet 127.0.0.1 11211-bash: te......

寰宇01
28分钟前
1
0
LNMP架构(Nginx访问日志、Nginx日志切割、静态文件不记录日志和过期时间)

Nginx访问日志 1.打开配置文件,搜索log_format vim /usr/local/nginx/conf/nginx.conf 2.访问日志常用变量含义 $remote_addr : 客户端IP(公网IP) $http_x_forwarded_for : 代理服务器的IP ...

蛋黄_Yolks
28分钟前
0
0
lombok 不用再写pojo的getset

java实体类不写get/set方法 1、下载地址https://projectlombok.org/download Myeclipse、eclipse安装lombok Lombok是一种Java实用工具,可以帮助开发人员消除Java的冗长,具体看lombok的官网...

木之下
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部