给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动

时间：2023-12-20 11:59:56

我们在调用系统的Alert，prompt的弹出提示时，不同的系统会有不同的提示框，视觉效果不统一，而且不好看，功能单一，现在我们通过Jquery模拟Alert，prompt，现实统一视觉效果，而且内容丰富的弹出提示。

Jquery可以扩展自己的功能，如果对Jquery开发插件不熟悉的人可以到官方网去看看文档，比较简单易懂。

  1. /*
  2. *  本插件基于JQUERY
  3. *  Jquery版本: 1.7.2
  4. *        Date:2012-06-28
  5. *      Author:Kingwell
  6. *      E-mail:jinhua.leng##gmail.com
  7. *
  8. *  ---------- 接口说明： ----------
  9. *
  10. *  --本插件采用kw命名空间，给Jquery添加静态方法，故调用方法为  $.kw.方法名 参数如下：
  11. *  --调用方法：
  12. *  --alert  $.kw.alert(content,title,callBack)
  13. *  --prompt $.kw.prompt(title,content,callBack)
  14. *
  15. *
  16. *  --   title 标题名称 如果缺省，则为默认标题，如："系统提示"
  17. *  -- content 内容显示的内容
  18. *  --callback 回调函数，单击确定后要执行的内容
  19. *
  20. *
  21. *  --功能：类似系统功能，支持拖动，响应键盘事件，ESC退出，Enter确定，以及回调函数功能。
  22. *
  23. *
  24. */
  25. $(function () {
  26. $.kw = {
  27. title      : "System information", //默认标题 可修改
  28. speed      : 400, //默认速度 可修改
  29. buttonName : "OK", //确定按钮默认名称 可修改
  30. cancel     : "Cancel", //取消按钮默认名称 可修改
  31. content    : "Content",
  32. //移除遮盖层
  33. del : function () {
  34. $("#alert-layer").remove();
  35. },
  36. //响应ESC键盘退出
  37. esc : function () {
  38. $(document).keyup(function (event) {
  39. if (event.which == 27) {
  40. $.kw.del();
  41. }
  42. });
  43. },
  44. //内容显示功能
  45. alert : function (sContent, sTitle, callBack) {
  46. var title = sTitle || this.title;
  47. var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button></div></div><div class='alert-bottom'></div></div></div>";
  48. $(layer).fadeIn(this.speed).appendTo("body");
  49. this.setting();
  50. this.move();
  51. $("#alert-button").focus();
  52. $("#alert-close").bind("click", this.del); //移除层
  53. $("#alert-button").bind("click", function () {
  54. if (callBack) {
  55. callBack();
  56. }
  57. $.kw.del();
  58. }); //移除层
  59. this.esc();
  60. },
  61. //提示
  62. confirm : function (sContent, callBack, sTitle) {
  63. var title = sTitle || this.title;
  64. var content = sContent || this.content;
  65. var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button><button id='alert-cancel'>" + this.cancel + "</button></div></div><div class='alert-bottom'></div></div></div>";
  66. $(layer).fadeIn(this.speed).appendTo("body");
  67. this.setting();
  68. $("#alert-button").focus(); //获得焦点
  69. this.move(); //拖动
  70. $("#alert-close").bind("click", this.del); //移除层
  71. $("#alert-cancel").bind("click", this.del); //移除层
  72. $("#alert-button").bind("click", function () {
  73. $.kw.del();
  74. if (callBack) {
  75. callBack();
  76. };
  77. }); //移除层
  78. this.esc();
  79. },
  80. //框拖动功能
  81. move : function () {
  82. $("#alert-title").mousedown(function (event) {
  83. var l = parseInt($("#alert-container").css("left")),
  84. t = parseInt($("#alert-container").css("top"));
  85. x = event.pageX - l;
  86. y = event.pageY - t;
  87. $("body").bind("mousemove", function (event) {
  88. $("#alert-container").css({
  89. "left" : (event.pageX - x)
  90. });
  91. $("#alert-container").css({
  92. "top" : (event.pageY - y)
  93. });
  94. //$("#alert-container").fadeTo(0,0.9)
  95. });
  96. });
  97. $("body").mouseup(function () {
  98. $("body").unbind("mousemove");
  99. //$("#alert-container").fadeTo(0,1)
  100. });
  101. },
  102. //设置背景层与内位置
  103. setting : function () {
  104. var bcw = document.documentElement.clientWidth,
  105. bch = document.documentElement.clientHeight,
  106. bsh = document.documentElement.scrollHeight,
  107. aw  = $("#alert-container").width() / 2,
  108. ah  = $("#alert-container").height() / 2;
  109. $("#alert-layer").css("height", bsh);
  110. $("#alert-container").css({
  111. "top"  : bch / 2 - ah,
  112. "left" : bcw / 2 - aw
  113. });
  114. }
  115. //$.kw  End
  116. };
  117. });
  1. #alert-layer button:focus{border:1px solid #AAA!important; background:#789!important; color:white; outline:none}
  2. #alert-layer{position:absolute;left:0;top:0;width:100%;height:100%;color:#333;line-height:1;z-index:10000; background:rgba(0,0,0,0.1)}
  3. #alert-layer #alert-container{border-radius:3px; padding:10px; width:390px; position:fixed; _position:absolute;}
  4. #alert-layer .alert-top{background:url(images/conner2.png) no-repeat left top; height:10px;}
  5. #alert-layer .alert-bottom{background:url(images/conner2.png) no-repeat left bottom; height:10px;}
  6. #alert-layer #alert-title{font-size:15px; height:30px;line-height:25px;padding:0 10px;position:relative;font-weight:bold;cursor:move;}
  7. #alert-layer #alert-close{background: url(images/close.gif) no-repeat center center; width:25px; height:25px; position:absolute; cursor:pointer; right:2px; top:0px;}
  8. #alert-layer .alert-button{ padding:5px 10px; text-align:right}
  9. #alert-layer #alert-content{background:#F1F1F1; border-top:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:10px 15px;}
  10. .alert-box{background:url(images/tc_bg.png) repeat-y left top; padding:0 6px}
  11. #alert-layer button{padding:5px; border:1px solid #CCC; margin:auto 5px; border-radius:2px; min-width:60px;}
  12. #alert-layer h1,#alert-layer h2,#alert-layer h3,#alert-layer h4{margin:10px auto; font-size:16px}

调用方法：

  1. $.kw.alert("提示内容")
  2. $.kw.alert("提示内容","系统提示")//修改弹出框提示标题
  3. $.kw.comport("提示内容");

相关文章