<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="../js/bootstrap-typeahead.js" type="text/javascript"></script>

<link href="../css/bootstrap.min.css" rel="stylesheet"/>

<script src="../js/bootstrap.min.js" type="text/javascript"></script>

<script src="../js/bootstrap-select.js" type="text/javascript"></script>

<link href="../css/bootstrap-select.min.css" rel="stylesheet"/>

<script type="text/javascript">

    /*

     用途描述：自定义的消息提示框和消息确认框，采用jquery的闭包方法实现，但必须依赖

     与jQuery，否则没有效果。

     使用说明：

     alert框请调用：zdalert(title,top,width, message, function(ret))

     confirm框请调用：zdconfirm(title,top,width, message, function(ret))

     方法参数说明：

     title：弹出框的显示标题；

     top：弹出框位于当前窗体的高度，请填写整数值，使用的分数形式(_height - boxHeight) / top

     width：弹出框的宽度，请填写px值。

     message：弹出框显示的内容。

     function：回调函数，需要执行的内容方法，参数ret有一个，为ture和false值*/

    (function($) {

//声明闭包方法

        $.alerts = {

            alert: function(title,top,width, message, callback) {

                if( title == null ) title = 'Alert';

                $.alerts._show(title,top,width, message, null, 'alert', function() {

                    if( callback ) callback(result);

                });

            },

            confirm: function(title, top,width,message, callback) {

                if( title == null ) title = 'Confirm';

                $.alerts._show(title, top,width,message, null, 'confirm', function(result) {

                    if( callback ) callback(result);

                });

            },

            _show: function(title,top,width,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(top,width);

                //判断是确认框还是提示框

                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) {

                            //enter键

                            if( e.keyCode == 13 ) {$("#mb_btn_ok").trigger('click');}

                            //esc键

                            if( e.keyCode == 27 ){ $("#mb_btn_no").trigger('click');}

                        });

                        break;

                }

            },

            _hide: function() {

                $("#mb_box,#mb_con").remove();

            }

        }

        // 显示提示框,top,width:top窗体位置当前窗口的高低的百分比，必须填写整数；width窗体显示的宽度。

        zdalert = function(title,top,width, message, callback) {

            $.alerts.alert(title,top,width, message, callback);

        }

        //显示确认框,top,width:top窗体位置当前窗口的高低的百分比，必须填写整数；width窗体显示的宽度。

        zdconfirm = function(title,top,width, message, callback) {

            $.alerts.confirm(title,top,width, message, callback);

        };

        //生成Css

        var GenerateCss = function (top,width) {

            $("#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: '350px', position: 'fixed',

             backgroundColor: 'White', borderRadius: '15px'

             });*/

            //去掉边框的圆

            $("#mb_con").css({ zIndex: '999999', width:width, position: 'fixed',

                backgroundColor: 'White'

            });

            $("#mb_tit").css({ display: 'block', fontSize: '14px', color: 'white', padding: '10px 15px',

                backgroundColor: '#31B0D5', borderRadius: '0 0 0 0',

                borderBottom: '3px solid #999', fontWeight: 'bold'

            });

            $("#mb_msg").css({ padding: '20px', lineHeight: '20px',

                borderBottom: '1px dashed #DDD', fontSize: '16px',backgroundColor:'#FCFCFC'

            });

            $("#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: '#168bbb', 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) / top + "px", left: (_widht - boxWidth) / 2 + "px" });

        }

    })(jQuery);

</script>

<body>

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

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

<script type="text/javascript">

    $("#add").bind("click", function () {

        // $.MsgBox.Alert("消息", "哈哈，添加成功！");

        zdalert('系统提示',3,"350px",'请输入正确数值',function(){

            //要回调的方法

            window.location.href="http://www.baidu.com"});

    });

    //也可以传方法名 test

    $("#update").bind("click", function () {

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

        zdconfirm('系统确认框',6,"350px",'你确认提交该条数据吗',function(r){

            if(r)

            {

                //...点确定之后执行的内容

                window.location.href="http://www.baidu.com"

            }

        });

    });

</script>

</body>

</html>

jquery实现自定义弹出框的更多相关文章

  1. 弹出框一 之 基于bootstrap和jquery的自定义弹出框

    (function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="moda ...

  2. .NET MVC 学习笔记（四）— 基于Bootstarp自定义弹出框

    .NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...

  3. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  4. android自定义弹出框样式实现

    前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...

  5. react native仿微信性别选择-自定义弹出框

    简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...

  6. bootstrap插件bootbox参数和自定义弹出框宽度设置

    插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...

  7. jquery的Layer弹出框操作

    在layer中,我们要先获取窗口的索引,然后再进行操作. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 $("# ...

  8. 自定义弹出框基于zepto 记得引入zepto

    html <!DOCTYPE html> <html> <meta charset="utf-8"> <title></tit ...

  9. android 自定义弹出框AlertDialog ，很炫的哦

      于是就小小的模仿了下自己写了这个这样的效果,主要代码如下:dlg = new AlertDialog.Builder(context).create();dlg.show();dlg.getWin ...

随机推荐

  1. linux实用命令备忘

    1. 卸载旧内核 sudo apt-get purge linux-image-xxx-xx-generic 2. 快速换ubuntu的源: sudo sed -i 's/vivid/wily/' / ...

  2. Google Code Jam 2014 Round 1 A：Problem C. Proper Shuffle

    Problem A permutation of size N is a sequence of N numbers, each between 0 and N-1, where each numbe ...

  3. Project Euler：Problem 87 Prime power triples

    The smallest number expressible as the sum of a prime square, prime cube, and prime fourth power is ...

  4. 【Python + Selenium】之JS定位总结

    感谢:小琰子 Python+Selenium 脚本中的一些js的用法汇总: 1.滚动条 driver.set_window_size(500,500) js = "window.scroll ...

  5. 谨慎使用ArrayList中的subList方法

    转自:https://www.toutiao.com/a6705958780460335619/?tt_from=weixin&utm_campaign=client_share&wx ...

  6. 【转】使用 Python Mock 类进行单元测试

    出处:https://www.oschina.net/translate/unit-testing-with-the-python-mock-class?lang=chs&page=2#

  7. Expression Tree上手指南 （一）

    大家可能都知道Expression Tree是.NET 3.5引入的新增功能.不少朋友们已经听说过这一特性,但还没来得及了解.看看博客园里的老赵等诸多牛人,将Expression Tree玩得眼花缭乱 ...

  8. #region的作用和注释快捷键

    让函数在编辑器中收起来,简洁 #region All MenuItems [@MenuItem("xxx")] public static void Init() { XXXXX; ...

  9. memcache 的使用

    基础知识 memcached 是一个开源项目,旨在利用多个服务器内的多余 RAM 来充当一个可存放经常被访问信息的内存缓存.这里的关键是使用了术语缓存:memcached 为加载自他处的信息提供的是内 ...

  10. 【BZOJ1899】[Zjoi2004]Lunch 午餐 贪心+DP

    [BZOJ1899][Zjoi2004]Lunch 午餐 Description 上午的训练结束了,THU ACM小组集体去吃午餐,他们一行N人来到了著名的十食堂.这里有两个打饭的窗口,每个窗口同一时 ...