<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery弹出框-jq22.com</title>

<script src="jquery-1.11.3.js"></script>

<style>

</style>

</head>

<body>

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

<!--   <input id="delete" type="button" value="删除" /> -->

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

<script>

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

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

});

//回调函数可以直接写方法function(){}

/*$("#delete").bind("click", function () {

    $.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？温馨提示", function () { alert("你居然真的删除了..."); });

});*/

function test() {

    alert("你点击了确定,重新进行认证");

}

//也可以传方法名 test

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

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

});

//当然你也可以不给回调函数,点击确定后什么也不做，只是关闭弹出层

　　　　 //$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？"); });

(function() {

    $.MsgBox = {

        Alert: function(title, msg) {

            GenerateHtml("alert", title, msg);

            btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback

            btnNo();

        },

        Confirm: function(title, msg, callback) {

            GenerateHtml("confirm", title, msg);

            btnOk(callback);

            btnNo();

        }

    }

    //生成Html

    var GenerateHtml = function(type, title, msg) {

        var _html = "";

        _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';

        _html += '<a id="mb_ico">x</a><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);

        //生成Css

        GenerateCss();

    }

    //生成Css

    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: '400px',

            position: 'fixed',

            backgroundColor: 'White',

            borderRadius: '15px'

        });

        $("#mb_tit").css({

            display: 'block',

            fontSize: '14px',

            color: '#444',

            padding: '10px 15px',

            backgroundColor: '#DDD',

            borderRadius: '15px 15px 0 0',

            borderBottom: '3px solid #009BFE',

            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"

        });

    }

    //确定按钮事件

    var btnOk = function(callback) {

        $("#mb_btn_ok").click(function() {

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

            if (typeof(callback) == 'function') {

                callback();

            }

        });

    }

    //取消按钮事件

    var btnNo = function() {

        $("#mb_btn_no,#mb_ico").click(function() {

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

        });

    }

})();

</script>

</body>

</html>

js+jquery手写弹出提示框的更多相关文章

  1. jquery删除记录弹出提示框

    来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...

  2. 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  3. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  4. jQuery - 选中复选框则弹出提示框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框

    1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...

  6. PHP弹出提示框并跳转到新页面即重定向到新页面

    本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下   这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...

  7. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  8. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  9. 关于winform窗体关闭时弹出提示框，选择否时窗体也关闭的问题

    在窗体中有FormClosing这个事件,这个事件是在窗体关闭时候运行的.如果要取消某个事件的操作,那么就在该事件中写上e.Cancel=true就能取消该事件,也就是不执行该事件.所以,你要在窗体关 ...

随机推荐

  1. 使用Navicat为MySQL建立定时任务

    1.编写好每个小时需要指定的sql语句,我一般都是编写的一个update SQL,也可以编写好一个函数存储过程 2.点击事件,可能回看到一些事件列表,然后点击上方的“新建事件”,会打开一个事件定义框( ...

  2. node学习第一天：nvm使用

    nvm是什么? 学习node,首先要安装node的环境,nvm是一款工具,使用这款工具可以很方便的下载所需版本的node文件以及npm,十分的方便. nvm下载: nvm下载链接 注:下载文件名为 n ...

  3. how to get address of member function

    see:http://www.cplusplus.com/forum/general/136410/ & http://stackoverflow.com/questions/8121320/ ...

  4. ASP.NET MVC5入门2之Ajax实现数据查询

    开发环境:VS2013 数据库:SQL Server2008R2 架构:ASP.NET MVC5 开发语言:C# 代码下载链接:http://download.csdn.net/detail/u010 ...

  5. 【原创】Linux基础之Shell脚本常用命令

    #!/bin/sh 1 取脚本参数 $# 参数个数$0 当前脚本名$1 第1个参数$n 第n个参数$* 所有参数$@ 所有参数$? 上个命令的状态$$ 当前pid 2 日期 $ dateWed Mar ...

  6. Truffle框架环境搭建

    注意:本教程需要Truffle4.0或者是更高的版本 以太坊的智能合约只是代码,和我们的纸质代码不同,此合同需要非常精确的方式理解 如果合同编码不正确,我们的交易可能会失败,会导致gas的损失,更不用 ...

  7. 业务侧有大量timeout请求超时日志

    故障背景:程序日志发现有程序请求数据库有大量的timeout请求故障时间:xxx~xxx 故障排查:排查应用服务器和数据库服务器网络和其它硬件监控没有断点,数据库监控请求数当时时间段几乎为0 故障分析 ...

  8. Tornado学习笔记(一) helloword/多进程/启动参数

    前言 当你觉得你过得很舒服的时候,你肯定没有在进步.所以我想学习新的东西,然后选择了Tornado.因为我觉得Tornado更匹配目前的我的综合素质. Tornado学习笔记系列主要参考<int ...

  9. 初学python之路-day14

    一.带参装饰器 # 通常,装饰器为被装饰的函数添加新功能,需要外界的参数 # -- outer参数固定一个,就是func # -- inner参数固定同被装饰的函数,也不能添加新参数 # -- 可以借 ...

  10. Confluence 6 用户目录图例 - 连接 Jira

    上面的图:Confluence 连接到 JIRA 为用户管理. https://www.cwiki.us/display/CONFLUENCEWIKI/Diagrams+of+Possible+Con ...