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. SourceTree 这是一个无效源路径/URL的 解决方法

    看网上的教程都解决不了,这是一个大坑,折腾了很久. 如果说你的项目存在,而不是url真的无效,那就是因为你的权限问题. 因为你的sourcetree登过其他账号,在sourceTree设置里面记录了他 ...

  2. Python3.5-20190508-廖老师-自我笔记-迭代器

    可以实现for ...in 的都可以称为,可迭代对象,Iterable 可以使用isinstance(是什么实例嘛)来判断是不是可迭代对象 可以被next()函数调用并不断返回下一个值的对象称为迭代器 ...

  3. 关于LCN分布式事务框架

    基于LCN框架解决分布式事务 LCN官网 https://www.txlcn.org/ "LCN并不生产事务,LCN只是本地事务的搬运工" 兼容 dubbo.springcloud ...

  4. java基础学习笔记一

    一.JAVA访问控制修饰符 用于控制类中成员的可见性 1.public(公有):在任何地方可以访问 2.protected(受保护的):子夫类(即使字父类不在同一包)和本包中可以访问 3.defaul ...

  5. centos下安装java jdk１.8

    ---恢复内容开始--- mysql密码修改了,发现还没装jdk,那就一起记录下来吧.虽然网上好多,但自己想查更方便了. 查看有没有装jdk #java -version显示下面信息,不是oracle ...

  6. element-uI隐藏表格头部

    1.表格结构定义 :show-header="hiddenTableHeader" 2. data里面定义 hiddenTableHeader:false,

  7. BZOJ 2839: 集合计数(二项式反演)

    传送门 解题思路 设\(f(k)\)为交集元素个数为\(k\)的方案数.发现我们并不能直接求出\(f(k)\),就考虑容斥之类的东西,容斥首先要扩大限制,再设\(g(k)\)表示至少有\(k\)个交集 ...

  8. mysql5.7-my.cnf

    [client] port = socket=/tmp/my3306.sock [mysql] no-auto-rehash [mysqld] #########base############ us ...

  9. 【Shiro】四、Apache Shiro授权

    1.授权实现方式 1.1.什么是授权 授权包含4个元素(一个比较流行通用的权限模型) Resources:资源 各种需要访问控制的资源 Permissions:权限 安全策略控制原子元素 基于资源和动 ...

  10. Linux下dd和od命令备份查看硬盘mbr，并用vim修改！

    主引导记录(Master Boot Record,MBR),位于一个硬盘的0柱面.0盘面.1扇区,共512字节.具体划分依次为:引导代码区440字节.磁盘签名4字节.空白(Ox0000)2字节.MBR ...