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. JS 富文本编码、解码

    第一种 escape()和unescape()方法 escape() 方法能够把 ASCII之外的所有字符转换为 %xx 或 %uxxxx(x表示十六进制的数字)的转义序列.从 \u000 到 \u0 ...

  2. Win32 API 多线程编程——一个简单实例(含消息参数传递)

    Win32 API进行程序设计具有很多优点:应用程序执行代码小,运行效率高,但是他要求程序员编写的代码较多,且需要管理所有系统提供给程序的资源,要求程序员对Windows系统内核有一定的了解,会占用程 ...

  3. linux随笔-05

    shell脚本&定时任务 编写Shell脚本 可以将Shell终端解释器当作人与计算机硬件之间的“翻译官”. Shell脚本命令的工作方式有两种:交互式和批处理. 交互式(Interactiv ...

  4. 【串线篇】SpringMvc数据传出

    /** * SpringMVC除过在方法上传入原生的request和session外还能怎么样把数据带给页面 *  * 四大域: *  pageContext:${pageScope.msg }< ...

  5. HashMap高并发下存在的问题

    原文链接:https://blog.csdn.net/bjwfm2011/article/details/81076736 1.什么是HashMap? HashMap底层原理 HashMap是存储键值 ...

  6. 原生js和jquery

    $(document).ready(function() {//jquery的写法 }); (function () { //原生js的写法 })();

  7. zk不同页面之间的即时刷新

    公共刷新方法 import org.zkoss.bind.annotation.GlobalCommand; import org.zkoss.bind.annotation.NotifyChange ...

  8. Redis缓存接入监控、运维平台CacheCloud

    改造RedisConnectionFactory /** * 根据缓存策略的不同,RedisConnectionFactory不同 * 示例是单机模式. * * @return */@Beanpubl ...

  9. 8086汇编和Win32汇编

    8086汇编是指在某环境下汇编编译产生的程序,用机器去执行每条指令的长度为16位(可小于16),如DOS操作系统:WIN32汇编是32位环境下的汇编,如Windows(Windows也有64位的,XP ...

  10. Android ROM 开发技能图谱

    # Android ROM 开发技能图谱 ## 1. 操作系统 * Ubuntu(首选)* MacOSX ## 2. 编程语言 * Java * JNI(务必掌握)* C++* C ## 3. 源码 ...