jquery 实现漂亮的confirm弹出框

news/2024/7/11 1:28:22 标签: jquery, stylesheet, border, float, function, deb
<!--
草山狐随笔
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.     positionabsolute;
  9.     background-color#ffffff;
  10. }
  11. div.jqi{
  12.     positionabsolute;
  13.     background-color#d0dEb6;
  14.     padding10px
  15.     width300px;
  16.     text-alignleft;
  17. }
  18. div.jqi .jqiclose{
  19.     floatright;
  20.     margin-35px -10px 0 0;
  21.     cursorpointer;
  22.     color#c0cEa6;
  23. }
  24. div.jqi .jqicontainer{
  25.     background-color#e0eEc6;
  26.     padding5px
  27.     color#ffffff;
  28.     font-weightbold;
  29. }
  30. div.jqi .jqimessage{
  31.     background-color#c0cEa6;
  32.     padding10px;
  33. }
  34. div.jqi .jqibuttons{
  35.     text-aligncenter;
  36.     padding5px 0 0 0;
  37. }
  38. div.jqi button{
  39.     padding3px 10px 3px 10px;
  40.     margin0 10px;
  41. }
  42. /*
  43. ------------------------------
  44.     impromptu
  45. ------------------------------
  46. */
  47. .impromptuwarning .impromptu{ background-color#aaaaaa; }
  48. .impromptufade{
  49.     positionabsolute;
  50.     background-color#ffffff;
  51. }
  52. div.impromptu{
  53.     positionabsolute;
  54.     background-color#cccccc;
  55.     padding10px
  56.     width300px;
  57.     text-alignleft;
  58. }
  59. div.impromptu .impromptuclose{
  60.     floatright;
  61.     margin-35px -10px 0 0;
  62.     cursorpointer;
  63.     color#213e80;
  64. }
  65. div.impromptu .impromptucontainer{
  66.     background-color#213e80;
  67.     padding5px
  68.     color#ffffff;
  69.     font-weightbold;
  70. }
  71. div.impromptu .impromptumessage{
  72.     background-color#415ea0;
  73.     padding10px;
  74. }
  75. div.impromptu .impromptubuttons{
  76.     text-aligncenter;
  77.     padding5px 0 0 0;
  78. }
  79. div.impromptu button{
  80.     padding3px 10px 3px 10px;
  81.     margin0 10px;
  82. }
  83. /*
  84. ------------------------------
  85.     columns ex
  86. ------------------------------
  87. */
  88. .colsJqifadewarning .colsJqi{ background-color#b0be96; }
  89. .colsJqifade{
  90.     positionabsolute;
  91.     background-color#ffffff;
  92. }
  93. div.colsJqi{
  94.     positionabsolute;
  95.     background-color#d0dEb6;
  96.     padding10px
  97.     width400px;
  98.     text-alignleft;
  99. }
  100. div.colsJqi .colsJqiclose{
  101.     floatright;
  102.     margin-35px -10px 0 0;
  103.     cursorpointer;
  104.     color#bbbbbb;
  105. }
  106. div.colsJqi .colsJqicontainer{
  107.     background-color#e0eEc6;
  108.     padding5px
  109.     color#ffffff;
  110.     font-weightbold;
  111.     height160px;
  112. }
  113. div.colsJqi .colsJqimessage{
  114.     background-color#c0cEa6;
  115.     padding10px;
  116.     width280px;
  117.     height140px;
  118.     floatleft;
  119. }
  120. div.colsJqi .jqibuttons{
  121.     text-aligncenter;
  122.     padding5px 0 0 0;
  123. }
  124. div.colsJqi button{
  125.     backgroundurl(../images/button_bg.jpg) top left repeat-x #ffffff;
  126.     bordersolid #777777 1px;
  127.     font-size12px;
  128.     padding3px 10px 3px 10px;
  129.     margin5px 5px 5px 10px;
  130.     width75px;
  131. }
  132. div.colsJqi button:hover{
  133.     bordersolid #aaaaaa 1px;
  134. }
  135. /*
  136. ------------------------------
  137.     brown theme
  138. ------------------------------
  139. */
  140. .brownJqiwarning .brownJqi{ background-color#cccccc; }
  141. .brownJqifade{
  142.     positionabsolute;
  143.     background-color#ffffff;
  144. }
  145. div.brownJqi{
  146.     positionabsolute;
  147.     background-colortransparent;
  148.     padding10px;
  149.     width300px;
  150.     text-alignleft;
  151. }
  152. div.brownJqi .brownJqiclose{
  153.     floatright;
  154.     margin-20px 0 0 0;
  155.     cursorpointer;
  156.     color#777777;
  157.     font-size11px;
  158. }
  159. div.brownJqi .brownJqicontainer{
  160.     positionrelative;
  161.     background-colortransparent;
  162.     bordersolid 1px #5F5D5A;
  163.     color#ffffff;
  164.     font-weightbold;
  165. }
  166. div.brownJqi .brownJqimessage{
  167.     positionrelative;
  168.     background-color#F7F6F2;
  169.     border-topsolid 1px #C6B8AE;
  170.     border-bottomsolid 1px #C6B8AE;
  171. }
  172. div.brownJqi .brownJqimessage h3{
  173.     backgroundurl(../images/brown_theme_gradient.jpg) top left repeat-x #ffffff;
  174.     margin0;
  175.     padding7px 0 7px 15px;
  176.     color#4D4A47;
  177. }
  178. div.brownJqi .brownJqimessage p{
  179.     padding10px;
  180.     color#777777;
  181. }
  182. div.brownJqi .brownJqimessage img.helpImg{
  183.     positionabsolute;
  184.     bottom: -25px;
  185.     left: 10px;
  186. }
  187. div.brownJqi .brownJqibuttons{
  188.     text-alignright;
  189. }
  190. div.brownJqi button{
  191.     backgroundurl(../images/brown_theme_gradient.jpg) top left repeat-x #ffffff;
  192.     bordersolid #777777 1px;
  193.     font-size12px;
  194.     padding3px 10px 3px 10px;
  195.     margin5px 5px 5px 10px;
  196. }
  197. div.brownJqi button:hover{
  198.     bordersolid #aaaaaa 1px;
  199. }
  200. /*
  201. *------------------------
  202. *   clean blue ex
  203. *------------------------
  204. */
  205. .cleanbluewarning .cleanblue{ background-color#acb4c4; }
  206. .cleanbluefade{ positionabsolutebackground-color#aaaaaa; }
  207. div.cleanblue{ font-familyVerdana, Geneva, ArialHelveticasans-serifpositionabsolutebackground-color#ffffffwidth300pxfont-size11pxtext-alignleftbordersolid 1px #213e80; }
  208. div.cleanblue .cleanbluecontainer{ background-color#ffffffborder-topsolid 14px #213e80padding5pxfont-weightbold; }
  209. div.cleanblue .cleanblueclose{ floatrightwidth18pxcursordefaultmargin-19px -12px 0 0color#fffffffont-weightbold; }
  210. div.cleanblue .cleanbluemessage{ padding10pxline-height20pxfont-size11pxcolor#333333; }
  211. div.cleanblue .cleanbluebuttons{ text-alignrightpadding5px 0 5px 0bordersolid 1px #eeeeeebackground-color#f4f4f4; }
  212. div.cleanblue button{ padding3px 10pxmargin0 10pxbackground-color#314e90bordersolid 1px #f4f4f4color#fffffffont-weightboldfont-size12px; }
  213. div.cleanblue button:hover{ bordersolid 1px #d4d4d4; }
原贴地址 http://www.xcopy.net.cn/read.php/236.htm

http://www.niftyadmin.cn/n/1412140.html

相关文章

Android XML绘图(4)——Bitmap

一、用法 <?xml version"1.0" encoding"utf-8"?> <bitmap xmlns:android"http://schemas.android.com/apk/res/android" android:src"[package:]drawable/drawable_resource" android:antialias["true" | "…

LoadRunner javavuser错误排查

Loadrunner 9.5/11 使用java 开发vsuer script需要的环境配置 本文从两个方面来讲&#xff1a;windows 32位操作系统&#xff1b;windows 64 操作系统开始之前&#xff0c;先说下java环境变量配置&#xff08;共3处&#xff09;&#xff1a;&#xff08;1&#xff09;JAVA_HOME…

利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定

好长的名字啊&#xff01;自己看得都觉得累了……废话到此为止&#xff0c;开始正文&#xff1a; 我们在写asp.net网页的时候&#xff0c;会用到很多需要数据绑定的控件。Asp.net提供了数据绑定这一特性&#xff0c;确实方便了很多。但是这样的绑定都是在服务器端完成的&#…

将现有Xcode工程加入local git

在项目目录里git init git add . git commit -m “Initial Commit” 转载于:https://www.cnblogs.com/mystory/archive/2013/05/14/3077608.html

Request.QueryString,Request.Form与JavaScript中模态窗口传参

1.大家一般最常用的可能就是:Request.QueryString["name"],用于接收Url中?后面的xyy这里不多说了. 2.Request.Form 可以接收Form窗体内控件值,值得注意的是Request.From["name"],name必须是控件的name名称,id的不ok! 例:<form id"form1&q…

[原创]c# 岛2 小辅助~~~ 钓鱼 连击

转载于:https://www.cnblogs.com/yueyue184/p/7620043.html

javascript常用函数整理

javascript函数&#xff1a; 1.禁止鼠标右键菜单代码块function stop() {return false; } document.oncontextmenu stop; //禁用鼠标右键 document.ondragstart stop; //禁止拖动 document.onselectstart stop; //禁止选择2.判断打开的页面是否存在父页面if (window.top wi…

表格客户端实现全选以及模态窗传值

1.表格客户端全选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns"http://www.w3.org/1999/xhtml"><head runat"server"&…