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. 大哥带我走渗透ii--时间盲注，布尔盲注

    5/27 基于布尔的盲注 我连题目都看不懂555,先去补充一点知识.https://blog.csdn.net/weixin_40709439/article/details/81355856 返回的 ...

  2. Java中File的处理

    不知道“文件”和“文件路径”是否存在的处理情况 1.如果是文件,先获取文件父路径,没有就生成父路径,然后再生成文件. public class TestMain { public static voi ...

  3. vue-cli脚手架快速搭建项目

    前言 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. 准备工作 在搭建一个vue项目之前,需要先安装好node.js和cnpm. 虽然np ...

  4. 纯js的右下角弹窗

    <html> <head> <title></title> <meta charset="UTF-8"> <scr ...

  5. BlueStore-先进的用户态文件系统《二》-BlueFS

    https://zhuanlan.zhihu.com/p/46362124 简介 上一篇文章中,介绍了BlueStore的诞生背景.逻辑架构以及设计思想,提到了在BlueStore中元数据都是存放在R ...

  6. 【软工项目Beta阶段】绝不划水队OUC-Market版本测试报告

    我们在开发APP的时候进行了软件的测试,同时发现了一些BUG,如下: bug 我的:与各种页面之间的交互不灵活 登录与注册:记住密码功能不完善 商场主界面:搜索功能还没有完善 收藏功能:与数据库的交互 ...

  7. CSS 提示工具(Tooltip)

    CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: 1.基础提示工具代码如下: <!doctye ht ...

  8. idea 配置idk

    [Toc] #一.idea配置全局jdk ##1.1 File-->Project Structure ##1.2 选择SDKs ##1.3 选择jdk路径即可,可以添加多个jdk #二.配置项 ...

  9. ICO和区块链区别

    区块链项目众筹(ICO)浅析 2017-07-25 原创 Fintech科普大使 ICO是区块链初创公司项目融资的重要方式类似于Kickstarter众筹,但有不同之处(具体在下一节详述),可以避开传 ...

  10. HTML-参考手册: 画布

    ylbtech-HTML-参考手册: 画布 1.返回顶部 1. HTML5 <canvas> 参考手册 描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 ...