jquery 实现漂亮的confirm弹出框

<!--
草山狐随笔
http://www.xcopy.net.cn
-->
<link href="confirm.css" rel="stylesheet" rev="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery-impromptu.1.5.js"></script>

<script type="text/javascript">
var txt = "你要访问“草山狐随笔吗？www.xcopy.net.cn”";
function myConfirm(){
jQuery.noConflict();
jQuery.prompt(txt,{
buttons:{访问:true, 暂不访问:false},
callback: function(v,m){
if(v){
open();
}else{
notOpen();
}
},
prefix:'cleanblue'
});
}

function open(){
alert("你点击了‘访问’按钮");
window.location.href="http://www.xcopy.net.cn";
}

function notOpen(){
alert("你点击了‘暂不访问’按钮");
}
</script>
<table width="500px" height="500px">
<tr>
<td align="center">
<input type="button" value="点这里试试" onClick="myConfirm()">
</td>
</tr>
</table>

1. /*
2. ------------------------------
3. Impromptu's
4. ------------------------------
5. */
6. .jqiwarning.jqi{background-color:#b0be96;}
7. .jqifade{
8. position:absolute;
9. background-color:#ffffff;
10. }
11. div.jqi{
12. position:absolute;
13. background-color:#d0dEb6;
14. padding:10px;
15. width:300px;
16. text-align:left;
17. }
18. div.jqi.jqiclose{
19. float:right;
20. margin:-35px-10px00;
21. cursor:pointer;
22. color:#c0cEa6;
23. }
24. div.jqi.jqicontainer{
25. background-color:#e0eEc6;
26. padding:5px;
27. color:#ffffff;
28. font-weight:bold;
29. }
30. div.jqi.jqimessage{
31. background-color:#c0cEa6;
32. padding:10px;
33. }
34. div.jqi.jqibuttons{
35. text-align:center;
36. padding:5px000;
37. }
38. div.jqibutton{
39. padding:3px10px3px10px;
40. margin:010px;
41. }
43. /*
44. ------------------------------
45. impromptu
46. ------------------------------
47. */
48. .impromptuwarning.impromptu{background-color:#aaaaaa;}
49. .impromptufade{
50. position:absolute;
51. background-color:#ffffff;
52. }
53. div.impromptu{
54. position:absolute;
55. background-color:#cccccc;
56. padding:10px;
57. width:300px;
58. text-align:left;
59. }
60. div.impromptu.impromptuclose{
61. float:right;
62. margin:-35px-10px00;
63. cursor:pointer;
64. color:#213e80;
65. }
66. div.impromptu.impromptucontainer{
67. background-color:#213e80;
68. padding:5px;
69. color:#ffffff;
70. font-weight:bold;
71. }
72. div.impromptu.impromptumessage{
73. background-color:#415ea0;
74. padding:10px;
75. }
76. div.impromptu.impromptubuttons{
77. text-align:center;
78. padding:5px000;
79. }
80. div.impromptubutton{
81. padding:3px10px3px10px;
82. margin:010px;
83. }
85. /*
86. ------------------------------
87. columnsex
88. ------------------------------
89. */
90. .colsJqifadewarning.colsJqi{background-color:#b0be96;}
91. .colsJqifade{
92. position:absolute;
93. background-color:#ffffff;
94. }
95. div.colsJqi{
96. position:absolute;
97. background-color:#d0dEb6;
98. padding:10px;
99. width:400px;
100. text-align:left;
101. }
102. div.colsJqi.colsJqiclose{
103. float:right;
104. margin:-35px-10px00;
105. cursor:pointer;
106. color:#bbbbbb;
107. }
108. div.colsJqi.colsJqicontainer{
109. background-color:#e0eEc6;
110. padding:5px;
111. color:#ffffff;
112. font-weight:bold;
113. height:160px;
114. }
115. div.colsJqi.colsJqimessage{
116. background-color:#c0cEa6;
117. padding:10px;
118. width:280px;
119. height:140px;
120. float:left;
121. }
122. div.colsJqi.jqibuttons{
123. text-align:center;
124. padding:5px000;
125. }
126. div.colsJqibutton{
127. background:url(../images/button_bg.jpg)topleftrepeat-x#ffffff;
128. border:solid#7777771px;
129. font-size:12px;
130. padding:3px10px3px10px;
131. margin:5px5px5px10px;
132. width:75px;
133. }
134. div.colsJqibutton:hover{
135. border:solid#aaaaaa1px;
136. }
138. /*
139. ------------------------------
140. browntheme
141. ------------------------------
142. */
143. .brownJqiwarning.brownJqi{background-color:#cccccc;}
144. .brownJqifade{
145. position:absolute;
146. background-color:#ffffff;
147. }
148. div.brownJqi{
149. position:absolute;
150. background-color:transparent;
151. padding:10px;
152. width:300px;
153. text-align:left;
154. }
155. div.brownJqi.brownJqiclose{
156. float:right;
157. margin:-20px000;
158. cursor:pointer;
159. color:#777777;
160. font-size:11px;
161. }
162. div.brownJqi.brownJqicontainer{
163. position:relative;
164. background-color:transparent;
165. border:solid1px#5F5D5A;
166. color:#ffffff;
167. font-weight:bold;
168. }
169. div.brownJqi.brownJqimessage{
170. position:relative;
171. background-color:#F7F6F2;
172. border-top:solid1px#C6B8AE;
173. border-bottom:solid1px#C6B8AE;
174. }
175. div.brownJqi.brownJqimessageh3{
176. background:url(../images/brown_theme_gradient.jpg)topleftrepeat-x#ffffff;
177. margin:0;
178. padding:7px07px15px;
179. color:#4D4A47;
180. }
181. div.brownJqi.brownJqimessagep{
182. padding:10px;
183. color:#777777;
184. }
185. div.brownJqi.brownJqimessageimg.helpImg{
186. position:absolute;
187. bottom:-25px;
188. left:10px;
189. }
190. div.brownJqi.brownJqibuttons{
191. text-align:right;
192. }
193. div.brownJqibutton{
194. background:url(../images/brown_theme_gradient.jpg)topleftrepeat-x#ffffff;
195. border:solid#7777771px;
196. font-size:12px;
197. padding:3px10px3px10px;
198. margin:5px5px5px10px;
199. }
200. div.brownJqibutton:hover{
201. border:solid#aaaaaa1px;
202. }
204. /*
205. *------------------------
206. *cleanblueex
207. *------------------------
208. */
209. .cleanbluewarning.cleanblue{background-color:#acb4c4;}
210. .cleanbluefade{position:absolute;background-color:#aaaaaa;}
211. div.cleanblue{font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;position:absolute;background-color:#ffffff;width:300px;font-size:11px;text-align:left;border:solid1px#213e80;}
212. div.cleanblue.cleanbluecontainer{background-color:#ffffff;border-top:solid14px#213e80;padding:5px;font-weight:bold;}
213. div.cleanblue.cleanblueclose{float:right;width:18px;cursor:default;margin:-19px-12px00;color:#ffffff;font-weight:bold;}
214. div.cleanblue.cleanbluemessage{padding:10px;line-height:20px;font-size:11px;color:#333333;}
215. div.cleanblue.cleanbluebuttons{text-align:right;padding:5px05px0;border:solid1px#eeeeee;background-color:#f4f4f4;}
216. div.cleanbluebutton{padding:3px10px;margin:010px;background-color:#314e90;border:solid1px#f4f4f4;color:#ffffff;font-weight:bold;font-size:12px;}
217. div.cleanbluebutton:hover{border:solid1px#d4d4d4;}

原贴地址 http://www.xcopy.net.cn/read.php/236.htm