<!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. MS SQL Server 增删改查

    数据插入 语法:INSERT INTO Table_name(field1,field2……fieldN) values(value1,vlaue2,…valueN) 单行插入用户类型 INSERT ...

  2. Python学习-字符编码浅析

    1.什么是字符编码 既然是简述那肯定是简单明了.字符编码,看名字就是一种字符的编码格式,由于计算机内部采用二进制,想要将人类的语言字符输入到计算机就需要一种编码格式,这就是字符编码.字符------- ...

  3. (转载)(int)a、&a、(int)&a、(int&)a的区别，很偏僻的题

    #include <iostream>#include <stdio.h>#include <string.h>#include <conio.h>us ...

  4. winform中textbox提示框

    在winform中向textbox输入内容时下面有提示信息,效果如图所示: private void Form1_Load(object sender, EventArgs e) {     Auto ...

  5. iOS UIDatePicker设置为中文的方法

    UIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 20, 200, 30)]; datePick ...

  6. JAVA 语言如何进行异常处理，关键字： throws,throw,try,catch,finally分别代表什么意义？ 在try块中可以抛 出异常吗？

    Java通过面向对象的方法进行异常处理,把各种不同的异常进行分类, 并提供了良好的接口.        在 Java中,每个异常都是一个对象,它是 Throwable 类或其它子类的实例.当一个方法出 ...

  7. window 上安装 Scala

    第一步:Java 设置 检测方法前文已说明,这里不再描述. 如果还为安装,可以参考我们的Java 开发环境配置. 接下来,我们可以从 Scala 官网地址 http://www.scala-lang. ...

  8. 如何在cmd中安装python第三方模块

    打开 cmd终端 1 输入pip  install   模块名. 2 等待安装完成即可.

  9. Java并发编程基础-线程安全问题及JMM(volatile)

    什么情况下应该使用多线程 : 线程出现的目的是什么?解决进程中多任务的实时性问题?其实简单来说,也就是解决“阻塞”的问题,阻塞的意思就是程序运行到某个函数或过程后等待某些事件发生而暂时停止 CPU 占 ...

  10. 利用map和stringstream数据流解题

    题目描述 喜闻乐见A+B.读入两个用英文表示的A和B,计算它们的和并输出. 输入 第一行输入一个字符串,表示数字A:第二行输入一个字符串表示数字B.A和B均为正整数. 输出 输出一个正整数n,表示A+ ...