jquery自定义对话框alert、confirm和prompt

转自：http://blog.csdn.net/donghongbz/article/details/30063463

jQuery Alert Dialogs，又一个基于jQuery的提示框插件，主要包括Alert、Confirm、prompt这三种，还有一个高级范例，可以在提示框内嵌入HTML语言，可以自定义风格样式。jQuery的提示框插件有很多种，每一款都是出自不同的高人之手，因此都比较有自己的特点，包括风格和使用方法等。
效果体验：http://keleyi.com/keleyi/phtml/jqplug/

英文版：http://keleyi.com/keleyi/phtml/jqplug/1.htm


这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有如下这些特点：

1：这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。

2：允许你自定义对话框的标题。

3：在ＩＥ７中，可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载。

4：这些方法都模拟了Windows的模式对话框。在你改变改变浏览器窗口大小时候，它能够自适应用户

窗口的调整。

5：如果你引入了jQuery UI Draggable plugin插件，那这个插件也可以被自由拖动。


jquery.alerts.js代码：

[javascript] view plain copy

 

1. // Download by http://keleyi.com  
2. // 由 柯乐义 改进改插件，使插件适用于新版的jquery（比如1.10.1） 版本  
3.   
4. // Visit http://keleyi.com/a/bjac/no0m3cb1.htm for more information  
5. //  
6. // Usage:  
7. //     jAlert( message, [title, callback] )  
8. //     jConfirm( message, [title, callback] )  
9. //     jPrompt( message, [value, title, callback] )  
10. //   
11. // History:  
12. //  
13. //     1.00 - Released (29 December 2008)  
14. // 2013-7-8  
15. (function($) {  
16.   
17. $.alerts = {  
18.   
19. // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time  
20.   
21. verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels  
22. horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/  
23. repositionOnResize: true, // re-centers the dialog on window resize  
24. overlayOpacity: .01, // transparency level of overlay  
25. overlayColor: '#FFF', // base color of overlay  
26. draggable: true, // make the dialogs draggable (requires UI Draggables plugin)  
27. okButton: ' OK ', // text for the OK button  
28. cancelButton: ' Cancel ', // text for the Cancel button  
29. dialogClass: null, // if specified, this class will be applied to all dialogs  
30.   
31. // Public methods  
32.   
33. alert: function(message, title, callback) {  
34. if( title == null ) title = 'Alert';  
35. $.alerts._show(title, message, null, 'alert', function(result) {  
36. if( callback ) callback(result);  
37. });  
38. },  
39.   
40. confirm: function(message, title, callback) {  
41. if( title == null ) title = 'Confirm';  
42. $.alerts._show(title, message, null, 'confirm', function(result) {  
43. if( callback ) callback(result);  
44. });  
45. },  
46.   
47. prompt: function(message, value, title, callback) {  
48. if( title == null ) title = 'Prompt';  
49. $.alerts._show(title, message, value, 'prompt', function(result) {  
50. if( callback ) callback(result);  
51. });  
52. },  
53.   
54. // Private methods  
55.   
56. _show: function(title, msg, value, type, callback) {  
57.   
58. $.alerts._hide();  
59. $.alerts._overlay('show');  
60.   
61. $("BODY").append(  
62. '<div id="popup_container">' +  
63. '<h1 id="popup_title"></h1>' +  
64. '<div id="popup_content">' +  
65. '<div id="popup_message"></div>' +  
66. '</div>' +  
67. '</div>');  
68.   
69. if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);  
70.   
71. // IE6 Fixvar pos = ('undefined' == typeof (document.body.style.maxHeight)) ? 'absolute' : 'fixed';  
72.   
73. $("#popup_container").css({  
74. position: pos,  
75. zIndex: 99999,  
76. padding: 0,  
77. margin: 0  
78. });  
79.   
80. $("#popup_title").text(title);  
81. $("#popup_content").addClass(type);  
82. $("#popup_message").text(msg);  
83. $("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') );  
84.   
85. $("#popup_container").css({  
86. minWidth: $("#popup_container").outerWidth(),  
87. maxWidth: $("#popup_container").outerWidth()  
88. });  
89.   
90. $.alerts._reposition();  
91. $.alerts._maintainPosition(true);  
92.   
93. switch( type ) {  
94. case 'alert':  
95. $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');  
96. $("#popup_ok").click( function() {  
97. $.alerts._hide();  
98. callback(true);  
99. });  
100. $("#popup_ok").focus().keypress( function(e) {  
101. if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');  
102. });  
103. break;  
104. case 'confirm':  
105. $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');  
106. $("#popup_ok").click( function() {  
107. $.alerts._hide();  
108. if( callback ) callback(true);  
109. });  
110. $("#popup_cancel").click( function() {  
111. $.alerts._hide();  
112. if( callback ) callback(false);  
113. });  
114. $("#popup_ok").focus();  
115. $("#popup_ok, #popup_cancel").keypress( function(e) {  
116. if( e.keyCode == 13 ) $("#popup_ok").trigger('click');  
117. if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');  
118. });  
119. break;  
120. case 'prompt':  
121. $("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');  
122. $("#popup_prompt").width( $("#popup_message").width() );  
123. $("#popup_ok").click( function() {  
124. var val = $("#popup_prompt").val();  
125. $.alerts._hide();  
126. if( callback ) callback( val );  
127. });  
128. $("#popup_cancel").click( function() {  
129. $.alerts._hide();  
130. if( callback ) callback( null );  
131. });  
132. $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {  
133. if( e.keyCode == 13 ) $("#popup_ok").trigger('click');  
134. if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');  
135. });  
136. if( value ) $("#popup_prompt").val(value);  
137. $("#popup_prompt").focus().select();  
138. break;  
139. }  
140.   
141. // Make draggable  
142. if( $.alerts.draggable ) {  
143. try {  
144. $("#popup_container").draggable({ handle: $("#popup_title") });  
145. $("#popup_title").css({ cursor: 'move' });  
146. } catch(e) { /* requires jQuery UI draggables */ }  
147. }  
148. },  
149.   
150. _hide: function() {  
151. $("#popup_container").remove();  
152. $.alerts._overlay('hide');  
153. $.alerts._maintainPosition(false);  
154. },  
155.   
156. _overlay: function(status) {  
157. switch( status ) {  
158. case 'show':  
159. $.alerts._overlay('hide');  
160. $("BODY").append('<div id="popup_overlay"></div>');  
161. $("#popup_overlay").css({  
162. position: 'absolute',  
163. zIndex: 99998,  
164. top: '0px',  
165. left: '0px',  
166. width: '100%',  
167. height: $(document).height(),  
168. background: $.alerts.overlayColor,  
169. opacity: $.alerts.overlayOpacity  
170. });  
171. break;  
172. case 'hide':  
173. $("#popup_overlay").remove();  
174. break;  
175. }  
176. },  
177.   
178. _reposition: function() {  
179. var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;  
180. var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;  
181. if( top < 0 ) top = 0;  
182. if( left < 0 ) left = 0;  
183.   
184. // IE6 fix  
185. if ('undefined' == typeof (document.body.style.maxHeight)) top = top + $(window).scrollTop();  
186.   
187. $("#popup_container").css({  
188. top: top + 'px',  
189. left: left + 'px'  
190. });  
191. $("#popup_overlay").height( $(document).height() );  
192. },  
193.   
194. _maintainPosition: function(status) {  
195. if( $.alerts.repositionOnResize ) {  
196. switch(status) {  
197. case true:  
198. $(window).bind('resize', function() {  
199. $.alerts._reposition();  
200. });  
201. break;  
202. case false:  
203. $(window).unbind('resize');  
204. break;  
205. }  
206. }  
207. }  
208.   
209. }  
210.   
211. // Shortuct functions  
212. jAlert = function(message, title, callback) {  
213. $.alerts.alert(message, title, callback);  
214. }  
215.   
216. jConfirm = function(message, title, callback) {  
217. $.alerts.confirm(message, title, callback);  
218. };  
219.   
220. jPrompt = function(message, value, title, callback) {  
221. $.alerts.prompt(message, value, title, callback);  
222. };  
223.   
224. })(jQuery);  

CSS代码：

[css] view plain copy

 

1. #popup_container {  
2. font-family: Arial, sans-serif;  
3. font-size: 12px;  
4. min-width: 300px; /* Dialog will be no smaller than this */  
5. max-width: 600px; /* Dialog will wrap after this width */  
6. background: #FFF;  
7. border: solid 5px #999;  
8. color: #000;  
9. -moz-border-radius: 5px;  
10. -webkit-border-radius: 5px;  
11. border-radius: 5px;  
12. }  
13. /* http://keleyi.com 柯乐义*/  
14. #popup_title {  
15. font-size: 14px;  
16. font-weight: bold;  
17. text-align: center;  
18. line-height: 1.75em;  
19. color: #666;  
20. background: #CCC url(images/title.gif) top repeat-x;  
21. border: solid 1px #FFF;  
22. border-bottom: solid 1px #999;  
23. cursor: default;  
24. padding: 0em;  
25. margin: 0em;  
26. }  
27.   
28. #popup_content {  
29. background: 16px 16px no-repeat url(http://keleyi.com/keleyi/phtml/jqplug/index/info.gif);  
30. padding: 1em 1.75em;  
31. margin: 0em;  
32. }  
33.   
34. #popup_content.alert {  
35. background-image: url(http://keleyi.com/keleyi/phtml/jqplug/index/info.gif);  
36. }  
37.   
38. #popup_content.confirm {  
39. background-image: url(http://keleyi.com/keleyi/phtml/jqplug/index/important.gif);  
40. }  
41.   
42. #popup_content.prompt {  
43. background-image: url(http://keleyi.com/keleyi/phtml/jqplug/index/help.gif);  
44. }  
45.   
46. #popup_message {  
47. padding-left: 48px;  
48. }  
49.   
50. #popup_panel {  
51. text-align: center;  
52. margin: 1em 0em 0em 1em;  
53. }  
54.   
55. #popup_prompt {  
56. margin: .5em 0em;  
57. }  

还需引用：
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>