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. HTML转成Excel设置单元格格式（文本）

    1) 文本:vnd.ms-excel.numberformat:@ 2) 日期:vnd.ms-excel.numberformat:yyyy/mm/dd 3) 数字:vnd.ms-excel.numb ...

  2. 常用的kubectl命令

    本文主要介绍kubernetes排查问题时经常用到的命令.这里主要借助kubectl命令来实现.以下列出常用命令,后面会对每个命令进行详细解释,并举例: kubectl核心命令 get  获取列出一个 ...

  3. c++后台开发面试常见知识点总结（四）数据库

    数据库的索引类型 聚集索引和非聚集索引的区别(叶节点存储内容) 唯一性索引和主码索引的区别 索引的优缺点,什么时候使用索引,什么时候不能使用索引(重点) 索引最左前缀问题 数据库中事务的ACID 数据 ...

  4. QML学习笔记（八）— QML实现列表侧滑覆盖按钮

    QML实现列表右边滑动删除按钮,并覆盖原有的操作按钮,点击可实现删除当前项 本文链接:QML实现列表侧滑覆盖按钮 作者:狐狸家的鱼 GitHub:八至 列表实现在另一篇博客已经提及,列表可选中.拖拽. ...

  5. R2CNN论文思路记录

    Rotational region cnn 我们的目标是检测任意方向的场景文本,与RRPN类似,我们的网络也基于FasterR-CNN ,但我们采用不同的策略,而不是产生倾斜角度建议. 我们认为RPN ...

  6. Python--多态与多态性、绑定方法与非绑定方法

    多态与多态性 多态 多态指的是一类事物有多种形态,(一个抽象类有多个子类,因而多态的概念依赖于继承) 1. 序列类型有多种形态:字符串,列表,元组. s='hello' l=[,,] t=('a',' ...

  7. paper 144：人生苦短，快用Python

    1.Python 语言特点 Python是一种面向对象.直译式计算机程序设计语言,这种语言的语法简捷而清晰,具有丰富和强大的类库,基本上能胜任你平时需要的编程工作. Python的优点: (1)编写的 ...

  8. tomcat部署项目遇到的问题

    场景:在一台服务器上部署多个Tomcat,每个Tomcat下运行各自的项目 * )启动Tomcat startup.cmd报错: java.lang.Exception: Socket bind fa ...

  9. jquery+javascript触发a标签的点击事件

    今天项目经理跟我说window.open()在一些浏览器上会被拦截,当时的解决方案是:用a标签的target="_blank"属性也可以打开窗体页面 于是解决了A问题出现了B问题: ...

  10. 在pycharm中切换python版本的方法

    转载自:https://blog.csdn.net/sgfmby1994/article/details/77876873 目前,python2和python3都有很重要的意义,所以,我们经常会在电脑 ...