1. (function () {
  2. $.MsgBox = {
  3. Alert: function (title, msg) {
  4. GenerateHtml("alert", title, msg);
  5. btnOk();  //alert只是弹出消息，因此没必要用到回调函数callback
  6. btnNo();
  7. },
  8. Confirm: function (title, msg, callback) {
  9. GenerateHtml("confirm", title, msg);
  10. btnOk(callback);
  11. btnNo();
  12. }
  13. }
  14. //生成Html
  15. var GenerateHtml = function (type, title, msg) {
  16. var _html = "";
  17. _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';
  18. _html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
  19. if (type == "alert") {
  20. _html += '<input id="mb_btn_ok" type="button" value="确定" />';
  21. }
  22. if (type == "confirm") {
  23. _html += '<input id="mb_btn_ok" type="button" value="确定" />';
  24. _html += '<input id="mb_btn_no" type="button" value="取消" />';
  25. }
  26. _html += '</div></div>';
  27. //必须先将_html添加到body，再设置Css样式
  28. $("body").append(_html);
  29. //生成Css
  30. GenerateCss();
  31. }
  32. //生成Css
  33. var GenerateCss = function () {
  34. $("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
  35. filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'
  36. });
  37. $("#mb_con").css({ zIndex: '999999', width: '400px', position: 'fixed',
  38. backgroundColor: 'White', borderRadius: '15px'
  39. });
  40. $("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',
  41. backgroundColor: '#DDD', borderRadius: '15px 15px 0 0',
  42. borderBottom: '3px solid #009BFE', fontWeight: 'bold'
  43. });
  44. $("#mb_msg").css({ padding: '20px', lineHeight: '20px',
  45. borderBottom: '1px dashed #DDD', fontSize: '13px'
  46. });
  47. $("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',
  48. border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',
  49. lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑'
  50. });
  51. $("#mb_btnbox").css({ margin: '15px 0 10px 0', textAlign: 'center' });
  52. $("#mb_btn_ok,#mb_btn_no").css({ width: '85px', height: '30px', color: 'white', border: 'none' });
  53. $("#mb_btn_ok").css({ backgroundColor: '#168bbb' });
  54. $("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });
  55. //右上角关闭按钮hover样式
  56. $("#mb_ico").hover(function () {
  57. $(this).css({ backgroundColor: 'Red', color: 'White' });
  58. }, function () {
  59. $(this).css({ backgroundColor: '#DDD', color: 'black' });
  60. });
  61. var _widht = document.documentElement.clientWidth;  //屏幕宽
  62. var _height = document.documentElement.clientHeight; //屏幕高
  63. var boxWidth = $("#mb_con").width();
  64. var boxHeight = $("#mb_con").height();
  65. //让提示框居中
  66. $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
  67. }
  68. //确定按钮事件
  69. var btnOk = function (callback) {
  70. $("#mb_btn_ok").click(function () {
  71. $("#mb_box,#mb_con").remove();
  72. if (typeof (callback) == 'function') {
  73. callback();
  74. }
  75. });
  76. }
  77. //取消按钮事件
  78. var btnNo = function () {
  79. $("#mb_btn_no,#mb_ico").click(function () {
  80. $("#mb_box,#mb_con").remove();
  81. });
  82. }
  83. })();

Html代码结构如下，js里面拼接的不直观，给出如下：

  1. <div id="mb_box"></div>
  2. <div id="mb_con">
  3. <span id="mb_tit">title</span><a id="mb_ico">x</a>
  4. <div id="mb_msg">msg</div>
  5. <div id="mb_btnbox">
  6. <input id="mb_btn_ok" type="button" value="确定" />
  7. <input id="mb_btn_no" type="button" value="取消" />
  8. </div>
  9. </div>

demo：

    1. <html xmlns="http://www.w3.org/1999/xhtml">
    2. <head>
    3. <title>模拟alert和confirm提示框</title>
    4. </head>
    5. <body>
    6. <input id="add" type="button" value="添加" />
    7. <input id="delete" type="button" value="删除" />
    8. <input id="update" type="button" value="修改" />
    9. <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
    10. <script src="../js/jquery.similar.msgbox.js" type="text/javascript"></script>
    11. <script type="text/javascript">
    12. $("#add").bind("click", function () {
    13. $.MsgBox.Alert("消息", "哈哈，添加成功！");
    14. });
    15. //回调函数可以直接写方法function(){}
    16. $("#delete").bind("click", function () {
    17. $.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？温馨提示", function () { alert("你居然真的删除了..."); });
    18. });
    19. function test() {
    20. alert("你点击了确定,进行了修改");
    21. }
    22. //也可以传方法名 test
    23. $("#update").bind("click", function () {
    24. $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test);
    25. });
    26. //当然你也可以不给回调函数,点击确定后什么也不做，只是关闭弹出层
    27. 　　　　 //$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？"); });
    28. </script>
    29. </body>
    30. </html>

jquery控件-实现自定义样式的弹出窗口和确认框（转）的更多相关文章

  1. WPF 4 DataGrid 控件（自定义样式篇）

    原文:WPF 4 DataGrid 控件(自定义样式篇)      在<WPF 4 DataGrid 控件(基本功能篇)>中我们已经学习了DataGrid 的基本功能及使用方法.本篇将继续 ...

  2. html文件上传控件file自定义样式

    问题: HTML自带的file上传按钮因在各种浏览器里显示样式不一.不易自定义样式给我们带来很大的麻烦. 解决思路: 将input[type=file]控件隐藏,使用一个input[type=text ...

  3. DevExpress第三方控件使用实例之ASPxPopupControl弹出子窗体

    弹出页面控件:ASPxPopupControl, <dxpc:ASPxPopupControl ID="popubCtr" runat="server" ...

  4. C# ie通过打印控件点打印，总是弹出另存为xps的对话框

    用的是lodop打印控件,点打印后,总是弹出另存为xps的对话框,后来在网上查到可能是把windows自带的Microsoft XPS Document Writer设为默认打印机的原因. 但现在没有 ...

  5. 2015.2.16 关于delphi web控件打开新网页时弹出关闭页面（js代码）出错的解决办法研究

    参考网址1:http://www.csharpwin.com/csharpspace/2360.shtml...参考网址2:http://www.oschina.net/question/234345 ...

  6. [js开源组件开发]js手机端浮层控件，并有多种弹出小提示，兼容pc端浏览器

    js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js di ...

  7. listview点击控件显示EditText，键盘弹出消失的解决方法：

    1.软键盘弹出后消失解决方法 AndoridManifet 在activity中添加: android:windowSoftInputMode="adjustPan" 2.使用方式 ...

  8. WinFrom - DataGridView控件右键选中记录并弹出菜单

    dataGridView右键菜单并选中该行 程序代码: private void dataGridView1_CellMouseDown(object sender, DataGridViewCell ...

  9. 20160513--js 弹出窗口带有iframe控件 备忘

    需要引用JQuery. /*! * 主 题:<页面弹出窗口> * 说 明:用于页面弹出的窗口. * 功能描述: * 1.生成弹出窗口,窗口内包括iframe控件: * 2.窗口弹出时,生成 ...

随机推荐

  1. Ansible--03 ansible 变量

    目录 Ansible 变量 变量概述 定义变量的方式 如何定义变量 Ansible变量优先级测试 变量注册 ansibl e层级定义变量 facts缓存 Ansible 变量 变量概述 变量提供了便捷 ...

  2. npm启动报错

    npm 启动报错  event.js 160 报错原因: 端口号被占用 解决方法: 1.重新定义一个端口号. 2.任务管理器关掉node进程,重新运行npm.

  3. Mac系统下安装Homebrew后无法使用brew命令

    打开终端输入 brew提示:command not found 解决方法 输入命令: sudo vim .bash_profile 然后输入以下代码: export PATH=/usr/local/b ...

  4. Mybatis基于XML配置SQL映射器(二)

    Mybatis之XML注解 之前已经讲到通过 mybatis-generator 生成mapper映射接口和相关的映射配置文件: 下面我们将详细的讲解具体内容 首先我们新建映射接口文档  sysUse ...

  5. Drbd+Heatbeat实现NFS共享文件存储高可用

    一.Drbd与Heartbeat简介 1.1   Drbd简介: Drbd是由内核模块和相关脚本而构成,用以构建高可用性的集群.其实现方式是通过网络来镜像整个设备.它允许用户在远程机器上建立一个本地块 ...

  6. window10安装mysql-5.7.20-winx64.zip

    window10安装mysql--winx64.zip 原文 https://www.cnblogs.com/ericli-ericli/p/6916285.html D:\share\src\win ...

  7. 一些idea

    二分答案似乎和最小生成树有着不可描述的奇怪关系.(滑稽 联赛级别的在矩形上乱搞的题无非几个思路(按出现概率排序):建图,二维前缀和,dp 涉及到求合法区间数的问题往往要用到桶.等差数列等思想,或者尝试 ...

  8. linux基础知识汇总(二）-vi/vim

    转:http://blog.csdn.net/sky04/article/details/5662582 vi与vim一样都是编辑器,不同的是vim更高级一些,可以理解是vi的高级版本.vi就像Win ...

  9. Redis入门很简单之四【初识Jedis】

    Redis入门很简单之四[初识Jedis] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存jedis  使用Jedis提供的Java API对Redis进行操作,是Red ...

  10. NIO浅析（一）

    一:NIO与IO的区别 1.NIO面对的是缓冲区,IO面对的是流 2.NIO是非阻塞的,IO是阻塞的 3.NIO中引入了选择器 二:既然NIO面对的是缓冲区,那就先来了解缓冲区 1.NIO中Buffe ...