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 -10px 0 0;
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: 5px 0 0 0;
37. }
38. div.jqi button{
39.     padding: 3px 10px 3px 10px;
40.     margin: 0 10px;
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 -10px 0 0;
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: 5px 0 0 0;
79. }
80. div.impromptu button{
81.     padding: 3px 10px 3px 10px;
82.     margin: 0 10px;
83. }
85. /*
86. ------------------------------
87.     columns ex
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 -10px 0 0;
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: 5px 0 0 0;
125. }
126. div.colsJqi button{
127.     background: url(../images/button_bg.jpg) top left repeat-x #ffffff;
128.     border: solid #777777 1px;
129.     font-size: 12px;
130.     padding: 3px 10px 3px 10px;
131.     margin: 5px 5px 5px 10px;
132.     width: 75px;
133. }
134. div.colsJqi button:hover{
135.     border: solid #aaaaaa 1px;
136. }
138. /*
139. ------------------------------
140.     brown theme
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: -20px 0 0 0;
158.     cursor: pointer;
159.     color: #777777;
160.     font-size: 11px;
161. }
162. div.brownJqi .brownJqicontainer{
163.     position: relative;
164.     background-color: transparent;
165.     border: solid 1px #5F5D5A;
166.     color: #ffffff;
167.     font-weight: bold;
168. }
169. div.brownJqi .brownJqimessage{
170.     position: relative;
171.     background-color: #F7F6F2;
172.     border-top: solid 1px #C6B8AE;
173.     border-bottom: solid 1px #C6B8AE;
174. }
175. div.brownJqi .brownJqimessage h3{
176.     background: url(../images/brown_theme_gradient.jpg) top left repeat-x #ffffff;
177.     margin: 0;
178.     padding: 7px 0 7px 15px;
179.     color: #4D4A47;
180. }
181. div.brownJqi .brownJqimessage p{
182.     padding: 10px;
183.     color: #777777;
184. }
185. div.brownJqi .brownJqimessage img.helpImg{
186.     position: absolute;
187.     bottom: -25px;
188.     left: 10px;
189. }
190. div.brownJqi .brownJqibuttons{
191.     text-align: right;
192. }
193. div.brownJqi button{
194.     background: url(../images/brown_theme_gradient.jpg) top left repeat-x #ffffff;
195.     border: solid #777777 1px;
196.     font-size: 12px;
197.     padding: 3px 10px 3px 10px;
198.     margin: 5px 5px 5px 10px;
199. }
200. div.brownJqi button:hover{
201.     border: solid #aaaaaa 1px;
202. }
204. /*
205. *------------------------
206. *   clean blue ex
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: solid 1px #213e80; }
212. div.cleanblue .cleanbluecontainer{ background-color: #ffffff; border-top: solid 14px #213e80; padding: 5px; font-weight: bold; }
213. div.cleanblue .cleanblueclose{ float: right; width: 18px; cursor: default; margin: -19px -12px 0 0; 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: 5px 0 5px 0; border: solid 1px #eeeeee; background-color: #f4f4f4; }
216. div.cleanblue button{ padding: 3px 10px; margin: 0 10px; background-color: #314e90; border: solid 1px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; }
217. div.cleanblue button:hover{ border: solid 1px #d4d4d4; }

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