现在的位置: 首页 > 综合 > 正文

jquery 实现漂亮的confirm弹出框

2013年12月03日 ⁄ 综合 ⁄ 共 6010字 ⁄ 字号 小 中 大 ⁄ 评论关闭
<!--
草山狐随笔
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

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞