<!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. 如何在eclipse中对项目进行重新编译

    有时由于eclipse异常关闭,当我们重启Eclipse,在启动项目时,会报错,说:ClassNotFound类似的错误,引起这种问题的原因可能是由于,Eclipse异常关闭引起的. 解决:在一个项目 ...

  2. Windows中查看端口占用及关闭对应进程

    开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID,之后在任务管理器(右键电脑屏幕的状态栏即可找到)中找到这个PID所对应的程序.如果任务管理器中没有PID ...

  3. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. CDH hive metastore启动报错：Unknown column 'A0.SCHEMA_VERSION_V2' in 'field list'

    新集群CDH版本,刚刚搭建起来,5个节点起了1个hive服务,另外5个节点又单独起了1个hive服务,一共2个人hive服务.老哥对其中的一个hive进行了数据迁移,对hive数据库进行了替换,就这样 ...

  5. Confluence 6 自定义站点和空间布局

    你可以通过编辑布局文件来修改 Confluence 的外观和感觉(也可以被称为装饰).编辑这些文件将会允许你对整个 Confluence 站点的外观和感觉进行修改或者仅仅是一个独立的空间. 当你对一个 ...

  6. py4j汉语转拼音多音字处理

    先看下效果 一 .布局 <!-- 上面的搜索框 --> <com.example.editablealphalist.widgget.ClearEditText android:id ...

  7. java报错:The type java.lang.Object cannot be resolved. It is indirectly referenced from required .class files

    看包的路径是否对对:比如这样不对(...src/object/obietc) 其它解决方法转载: https://www.cnblogs.com/yadongliang/p/5918228.html ...

  8. 单例、异常、eval函数

    一.单例 01. 单例设计模式 设计模式 设计模式 是 前人工作的总结和提炼,通常,被人们广泛流传的设计模式都是针对 某一特定问题 的成熟的解决方案 使用 设计模式 是为了可重用代码.让代码更容易被他 ...

  9. C#关于线程的问题

    1.通过System.threading.Thread类可以创建新的线程,并在线程堆栈中运行静态和动态的实例,可以通过Thread类的构造方法传递一个无参数,并且不返回的委托, class Progr ...

  10. postMan测试https接口

    一.如何安装postman? Postman下载地址https://www.getpostman.com/ 我下载的版本是Postman-win64-5.0.0-Setup.exe 这是免安装的,可以 ...