弹出框效果:
1.首先我们要在文件的上面包含样式文件ymPrompt.css和js文件ymPrompt.js:如下:
<link rel="stylesheet" id='skin' type="text/css" href="<%=request.getContextPath()%>/css/ymPrompt.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ymPrompt.js"></script>
1.1,ymPrompt.css内容为:
/*container*/
#ym-window{
background:#fff;overflow:hidden;
font-size:12px;font-family:'宋体'
}
/*header*/
.ym-tl{padding-left:3px;background:#CFD7EC url(../p_w_picpaths/title_bg_left.gif) no-repeat 0 0}
.ym-tr{padding-right:3px;background:#CFD7EC url(../p_w_picpaths/title_bg_right.gif) no-repeat right 0;}
.ym-tc{background:#CFD7EC url(../p_w_picpaths/title_bg_center.gif) repeat-x 0 0;overflow:hidden;height:25px;line-height:25px;}
.ym-ttc{height:3px}
.ym-header-text{font-size:12px;font-weight:bold;color:#fff;margin-left:5px;float:left}
.ym-header-tools{float:right;margin-top:5px}
.ym-header-tools strong{display:none}
/*body*/
.ym-ml{background:url(../p_w_picpaths/win_l.gif) repeat-y 0 0;padding-left:3px;}
.ym-mr{background:url(../p_w_picpaths/win_r.gif) repeat-y right 0;padding-right:3px;}
.ym-mc{background:url(../p_w_picpaths/content_bg.gif) repeat-x 0 0;padding:0}
.ym-body{overflow:auto;padding:0;font-size:12px;}
/*button*/
.ym-btn{text-align:center}
/*footer*/
.ym-bl{background:url(../p_w_picpaths/win_lb.gif) no-repeat 0 bottom;padding-left:3px}
.ym-br{background:url(../p_w_picpaths/win_rb.gif) no-repeat right bottom;padding-right:3px}
.ym-bc{background:url(../p_w_picpaths/win_b.gif) repeat-x 0 bottom;height:3px;font-size:3px}
/*icon*/
.ymPrompt_alert{
padding-left:90px;
background:url(../p_w_picpaths/info.gif) no-repeat 20px 50%
}
.ymPrompt_succeed{
padding-left:90px;
background:url(../p_w_picpaths/right.gif) no-repeat 20px 50%
}
.ymPrompt_error{
padding-left:90px;
background:url(../p_w_picpaths/err.gif) no-repeat 20px 50%
}
.ymPrompt_confirm{
padding-left:90px;
background:url(../p_w_picpaths/ask.gif) no-repeat 20px 50%
}
.ymPrompt_alert .ym-content,.ymPrompt_succeed .ym-content,.ymPrompt_error .ym-content,.ymPrompt_confirm .ym-content{padding:50px 0 0}
/*图标公共定义*/
.ym-header-tools div{
cursor:pointer;
width:16px;height:16px;float:left;margin:0 1px;
background:url(../p_w_picpaths/ico.gif) no-repeat 0 0;
}
.ymPrompt_close{
background-position:-16px 0 !important;
}
.ymPrompt_max{
background-position:0 -16px !important;
}
.ymPrompt_min{
background-position:0 0 !important;
}
.ymPrompt_normal{
background-position:-16px -16px !important;
}
/*取消确认按钮样式*/
input.btnStyle{
background:url(../p_w_picpaths/btn_bg.gif) no-repeat;
width:80px;height:21px;line-height:21px;
font-size:12px;color:#183C94;border:0;margin:10px 0
}
1.2,ymPrompt.js文件的内容为:
eval(function(B,D,A,G,E,F){function C(A){return A<62?String.fromCharCode(A+=A<26?65:A<52?71:-4):A<63?'_':A<64?'$':C(A>>6)+C(A&63)}while(A>0)E[C(G--)]=D[--A];return B.replace(/[\w\$]+/g,function(A){return E[A]==F[A]?A:E[A]})}('(z(){O(v.0)n;U CX=z(N){n CS CR("DD","n Do.prototype.toString.D3(DD)==\'[Cr "+N+"]\'")},Bl=CX("Array"),Bs=CX("Do");v.0={version:"EB.I",pubDate:"2009-03-02",k:z(B,M,N){O(N)0.k(B,N);O(B&&M&&Bs(M))Z(U A BZ M)B[A]=M[A];n B},B1:[]};U Cw=["CF","f"],BK={},H;BX(H=Cw.BB())0[H]=CK("I,z(){BK."+H+"?BK."+H+".g(9):(BK."+H+"=[9])}");U BE=!+"\\v1",BT=2.compatMode=="CSS1Compat",BD=BE&&/MSIE (\\C$)\\./.Ce(navigator.userAgent)&&6(RegExp.$1)<EC,Br=!BE||(!BD&&BT),N=z(N){n 2.getElementById(N)},Bn=z(N){n 6(N.h.u)||N.Bt},3=(z(){n CS CR("BI","S","X","X=X||2;"+(v.Cg?"X.Cg(\'Dg\'+BI,S)":"X.addEventListener(BI,S,i)")+";0.B1.g([BI,S,X])")})(),$=(z(){n CS CR("BI","S","X","X=X||2;"+(v.Cg?"X.$(\'Dg\'+BI,S)":"X.removeEventListener(BI,S,i)"))})(),1=z(A,B,N){O(!A)n;O(Bs(B)){Z(U C BZ B)1(A,C,B[C]);n}O(Bl(A)||/htmlcollection|nodelist/Bd.Ce(""+A)){Z(C=A.s-J;C>=I;C--)1(A[C],B,N);n}Bq{A.h[B]=N}Bz(M){}},5=I,4,DB=I,Cq=z(E,M,D,N){O(!E)n;O(Bl(E)){U B,A=[],C={Bm:[m.Dk,"ok"],Di:[m.Dp,"cancel"]};BX(E.s)(B=E.BB())&&A[A.g(Cq.k(d,C[B]||B))-J]||A.pop();n A}N=N||"ymPrompt_btn_"+DB++;D=D==Ca?"Ca":!!D;n{Q:N,Da:"<DP type=\'button\' Q=\'"+N+"\' onclick=\'0.Cc(\\""+M+"\\","+D+")\' h=\'Db:pointer\' j=\'btnStyle Cd\' value=\'"+E+"\' />"}},DZ=z(N){O(!N)n 4="";O(!Bl(N))N=[N];O(!N.s)n 4="";4=N.CG();U M=[];BX(N.s)M.g(N.BB().Da);n M.DF("&Dj;&Dj;")},Cb={B4:"\\u5185\\u5bb9",l:300,u:185,BO:"\\u6807\\u9898",Cd:z(){},Dw:"#DX",Cp:I.J,r:i,BV:"",BG:d,Dd:a,B0:a,D9:i,CU:a,CL:a,DQ:"CQ",C_:I.ED,closeBtn:a,B$:i,BQ:i,Bo:{Ch:I.L,Cj:50},closeTxt:"\\DO\\Ds",Dk:" \\u786e \\u5b9a ",Dp:" \\u53d6 \\u6d88 ",DY:"P-content",minBtn:i,minTxt:"\\B7\\Dv\\B6",Dx:i,maxTxt:"\\B7\\De\\B6",DG:i,C0:i},m={};(z(){U o=2.Bv,CB=9.CB;O(!o||typeof o!="Cr")n 3("load",CB,v);O(BE&&2.Dr!="DV")n 3("readystatechange",z(){2.Dr=="DV"&&CB()});o=BT?2.documentElement:o;U CH=2.C8("CH").s;O(!BE&&CH)n;U Bk=z(){n m.B0&&Br?[I,I]:[o.DJ,o.D5]},B_=z(){U N=Bk();0.k(BC,{C4:6(p.h.c)-N[I],C5:6(p.h.Y)-N[J]})},CO="BF:BM;Y:I;c:I;w:b;DM-align:center",T=2.createElement("T");T.8=["<T Q=\'BL\' h=\'"+CO+";Bf-Bi:Dm;\'></T>",BD?("<r Q=\'DA\' Cl=\'D7:i\' h=\'"+CO+";Bf-Bi:9999;BJ:B3(x=I);x:I\'></r>"):"","<T Q=\'P-v\' h=\'BF:BM;Bf-Bi:10001;w:b\'>",BD?"<r Cl=\'D7:i\' h=\'l:BH%;u:BH%;BF:BM;Y:I;c:I;Bf-Bi:-J\'></r>":"","<T j=\'P-CV\' Q=\'P-CV\'><T j=\'P-tr\'><T j=\'P-DL\' h=\'Db:move;\'><T j=\'P-C2-DM\'></T><T j=\'P-C2-tools\'>","<T j=\'DE\' BO=\'\\B7\\Dv\\B6\'><BW>I</BW></T>","<T j=\'Dt\' BO=\'\\B7\\De\\B6\'><BW>J</BW></T>","<T j=\'ymPrompt_close\' BO=\'\\DO\\Ds\'><BW>DI</BW></T>","</T></T></T></T>","<T j=\'P-B9\' Q=\'P-B9\'><T j=\'P-Dq\'><T j=\'P-mc\'><T j=\'P-Bv\' h=\'BF:relative\'></T></T></T></T>","<T j=\'P-B9\' Q=\'P-Dh\'><T j=\'P-Dq\'><T j=\'P-BG\'></T></T></T>","<T j=\'P-CY\' Q=\'P-CY\'><T j=\'P-br\'><T j=\'P-bc\'></T></T></T>","</T>",BE?"<T Q=\'P-Df\' h=\'BF:BM;Bf-Bi:Dm;CT:#808080;BJ:B3(x=80) progid:DXImageTransform.Microsoft.Blur(pixelradius=K);w:b\'></T>":""].DF("");2.Bv.appendChild(T);U BL=N("BL"),p=N("P-v"),Be=N("P-Df"),BS,CC=N("P-CV"),BA=CC._._,CE=BA._,Ba=CE.CZ,y=N("P-B9")._._._,Bu=N("P-Dh"),Dc=Bu._._,DK=N("P-CY"),Bj=[BL];BD&&Bj.g(N("DA"));U q=Ba.childNodes,BC={},7="Bh",Bw=[I,I],CA=z(){U N=Bk();Bw=[6(p.h.c)-N[I],6(p.h.Y)-N[J]]},CP=z(){CA();7="V";q[J]._.8="K";q[J].BN="DC";BY(o.Bx,o.Bg,[I,I])},Cm=z(){CA();7="W";q[I]._.8="K";q[I].BN="DC";BY(I,Bn(CC),Bw)},Bp=z(N){!N&&7=="W"&&CA();7="Bh";q[I]._.8="I";q[J]._.8="J";q[I].BN="DE";q[J].BN="Dt";BY.k(this,N?[]:[I,I,Bw])},V,W;3("Ck",W=z(){7!="Bh"?Bp():Cm()},q[I]);3("Ck",V=z(){7!="Bh"?Bp():CP()},q[J]);3("dblclick",z(N){m.Dx&&(N.Cs||N.Ct).DU!=Ba&&V()},BA);3("Ck",z(){0.Cc("CW")},q[K]);U CD=z(){n[e.V(o.scrollWidth,o.Bx),e.V(o.scrollHeight,o.Bg)]},Cv=CD(),t=BA.C6&&BA,BR=z(N){!CH&&1(p,N==J&&BT?{BJ:"",x:""}:{BJ:"Dn(x="+N*BH+")",x:N})},CI=z(A){U M=BC.D0+A.C1,C=BC.D1+A.Cz;O(!m.D9){U D=Bk(),N=D[I],B=D[J];M=e.W(e.V(M,N),o.Bx-p.Cu+N);C=e.W(e.V(C,B),o.Bg-p.Bt+B)}Cy O(m.CL&&""+Cv!=""+CD())B8(a);1(BS,{c:M+"R",Y:C+"R"})},Bb=z(){BR(J);$("C9",CI,t);$("DR",Bb,t);B_();m.r&&1(BU().CZ,"w","b");t&&($("DH",Bb,t),t.releaseCapture())};3("mousedown",z(M){O((M.Cs||M.Ct).DU==Ba)n i;BR(m.C_);0.k(BC,{D0:6(p.h.c)-M.C1,D1:6(p.h.Y)-M.Cz});3("C9",CI,t);3("DR",Bb,t);O(m.r){U A={w:""},N=BU();BT&&BD&&0.k(A,{l:N.Cu,u:N.Bt});1(N.CZ,A)}t&&(3("DH",Bb,t),t.C6())},BA);U DS=z(){1(p,{c:BC.C4+o.DJ+"R",Y:BC.C5+o.D5+"R"})},D2=z(A){U M=A.DT;O(M==27)B2();O(4){U C=4.s,B;2.Dy&&2.Dy.Q!=4[5].Q&&(B=a);O(M==C3||M==39)B&&(5=-J),N(4[++5==C?(--5):5].Q).Cf();O(M==37)B&&(5=C),N(4[--5<I?(++5):5].Q).Cf();O(M==C7)n a}n Bc(A,(M>110&&M<123)||M==C3||M==C7)},Bc=z(A,M){A=A||event;O(!M&&/DP|select|textarea/Bd.Ce((A.Cs||A.Ct).tagName))n a;Bq{A.returnValue=i;A.DT=I}Bz(N){A.Du&&A.Du()}n i};BL.DW=Bc;U B8=z(N){1(Bj,"w","b");U A=CD(),M=z(){1(Bj,{l:A[I]+"R",u:A[J]+"R",w:""})};BE?N===a?M():setTimeout(M,I):M();7=="W"?Cm():7=="V"?CP():BY()},B5=z(N){O(!m.CL)n;(N===i?$:3)("resize",B8,v);O(N===i)n 1(Bj,"w","b");1(BL,{CT:m.Dw,BJ:"Dn(x="+m.Cp*BH+")",x:m.Cp});B8(a)},Dz=z(G){G=Bl(G)&&G.s==K?(G[I]+"+{K},{L}+"+G[J]):(CN[G]||CN["CQ"]);U Cx=[o.Bx-p.Cu,o.Bg-p.Bt].CG(Bk()),Ci=G.replace(/\\{(\\C$)\\}/D$,z(M,N){n Cx[N]}).split(",");n[CK(Ci[I]),CK(Ci[J])]},CN={CQ:"{I}/K+{K},{J}/K+{L}",EA:"{K},{J}/K+{L}",DI:"{I}+{K},{J}/K+{L}",H:"{I}/K+{K},{L}",D_:"{I}/K,{J}+{L}",lt:"{K},{L}",lb:"{K},{J}+{L}",rb:"{I}+{K},{J}+{L}",rt:"{I}+{K},{L}"},BY=z(N,M,A){O(p.h.w=="b")n;M=6(M)||m.u;N=6(N)||m.l;1(BS,{l:N+"R",u:M+"R",c:I,Y:I});A=Dz(A||m.DQ);1(BS,{Y:A[J]+"R",c:A[I]+"R"});B_();1(y,"u",M-Bn(CC)-Bn(Bu)-Bn(DK)+"R");BT&&BD&&m.r&&1(BU(),{u:y.Bg})},By=[],BP=[],Co=z(A){U CM=A===i?$:3;CM("scroll",m.B0&&!Br?DS:B_,v);1(BS,"BF",m.B0&&Br?"fixed":"BM");CM("keydown",D2);O(A===i){1(Be,"w","b");U C=z(){1(p,"w","b");1(By,"CJ","visible");By=[];BP.BB();O(BP.s)0.f.k(d,BP[I].CG(a))},M=z(){U A=J,M=z(){A=e.V(A-m.Bo.Ch,I);BR(A);O(A==I){B5(i);C();D4(N)}};M();U N=D6(M,m.Bo.Cj)};m.BQ?M():C();n}Z(U D=2.C8("Cr"),F=D.s-J;F>-J;F--)D[F].h.CJ!="D8"&&By.g(D[F])&&(D[F].h.CJ="D8");1([CE,Ba],"w",(m.CU?"":"b"));BA.BN="P-DL"+(m.CU?"":" P-ttc");CE.8=m.BO;Z(U F=I,B=["W","V","CW"];F<L;F++){q[F].h.w=m[B[F]+"Btn"]?"":"b";q[F].BO=m[B[F]+"Txt"]}U E="BF:BM;l:BH%;u:BH%;Y:I;c:I;x:J;BJ:B3(x=BH)";y.8=!m.r?("<T j=\\""+m.DY+"\\">"+m.B4+"</T>"):"<r h=\'"+E+"\' border=\'I\' frameborder=\'I\' Cl=\'"+m.B4+"\'></r><T h=\'"+E+";CT:#DX;x:I.J;BJ:B3(x=10);w:b\'></T>";(z(M,A){Z(U B BZ A){Bq{M[B]=A[B]}Bz(N){}}})(y._,m.r);y.BN="P-Bv "+m.BV;1(Bu,"w",((Dc.8=DZ(Cq(m.BG)))?"":"b"));!m.BQ&&m.B$&&1(Be,"w","");1(p,"w","");Bp(a);BR(m.BQ?I:J);m.BQ&&(z(){U A=I,N=z(){A=e.W(A+m.Bo.Ch,J);BR(A);O(A==J){D4(M);m.B$&&1(Be,"w","")}};N();U M=D6(N,m.Bo.Cj)})();4&&N(4[5=I].Q).Cf();p.onselectstart=m.DG?d:Bc;p.DW=m.C0?d:Bc},DN=z(){BS=[p].CG(m.B$?Be:"");B5();Co()},B2=z(){!m.BQ&&B5(i);Co(i)},BU=z(){n m.r?y._:d};0.k(0,{CW:B2,V:V,W:W,Bh:Bp,BU:BU,f:z(M,N,C){O(!C&&BP.g([M,N])&&BP.s>J)n;U A=[].slice.D3(M,I),B={},D=-J;O(!Bs(A[I])){Z(U E BZ Cb)O(A[++D])B[E]=A[D]}Cy B=A[I];0.k(m,0.k({},B,N),0.CF());Z(E BZ m)m[E]=m[E]!=d?m[E]:0.Cn[E];DN()},Cc:z(N,B,A){O(B==Ca?m.Dd:B)B2();Bq{(m.Cd)(N)}Bz(M){Dl(M.B4)}},resizeWin:BY,CF:z(N){n 0.Cn=0.k({},N,0.k({},0.Cn,Cb))},getButtons:z(){U A=4||[],M,B=[];BX(M=A.BB())B.g(N(M.Q));n B}});0.CF();U H;Z(U Bd BZ BK)BX(H=BK[Bd].BB())0[Bd].k(d,H);3("unload",z(){BX(0.B1.s)$.k(d,0.B1.BB())},v)})()})();0.k(0,{Dl:z(){0.f(9,{BV:"ymPrompt_alert",BG:["Bm"]})},succeedInfo:z(){0.f(9,{BV:"ymPrompt_succeed",BG:["Bm"]})},errorInfo:z(){0.f(9,{BV:"ymPrompt_error",BG:["Bm"]})},confirmInfo:z(){0.f(9,{BV:"ymPrompt_confirm",BG:["Bm","Di"]})},win:z(){0.f(9)}})','G|f|t|0|1|2|3|_|$|if|ym|id|px|fn|div|var|max|min|obj|top|for|true|none|left|null|Math|show|push|style|false|class|apply|width|curCfg|return|rootEl|ym_win|ym_ico|iframe|length|bindEl|height|window|display|opacity|ym_body|function|ymPrompt|setStyle|document|addEvent|btnCache|btnIndex|parseInt|cur_state|innerHTML|arguments|firstChild|detachEvent|ym_head|shift|dragVar|IE6|isIE|position|btn|100|env|filter|_initFn|maskLevel|absolute|className|title|cacheWin|useSlide|filterWin|ym_wins|isCompat|getPage|icoCls|strong|while|setWinSize|in|ym_hTool|uEvent|keyEvent|i|ym_shadow|z|clientHeight|normal|index|maskEl|getScrollPos|isArray|OK|$height|slideCfg|doNormal|try|useFixed|isObj|offsetHeight|ym_btn|body|cur_cord|clientWidth|_obj|catch|fixPosition|eventList|destroy|alpha|message|maskVisible|u5316|u6700|resizeMask|ml|saveWinInfo|showShadow|cal_cord|callee|ym_headbox|getWinSize|ym_hText|setDefaultCfg|concat|frameset|mEvent|visibility|eval|showMask|F|posMap|maskStyle|doMax|c|Function|new|background|titleBar|tl|close|objType|bl|nextSibling|undefined|dftCfg|doHandler|handler|test|focus|attachEvent|increment|arr|interval|click|src|doMin|cfg|winVisible|maskAlpha|mkBtn|object|srcElement|target|offsetWidth|winSize|initFn|pos|else|clientY|allowRightMenu|clientX|header|9|_offX|_offY|setCapture|13|getElementsByTagName|mousemove|winAlpha|d|maskIframe|seed|ymPrompt_normal|o|ymPrompt_min|join|allowSelect|losecapture|r|scrollLeft|ym_bottom|tc|text|init|u5173|input|winPos|mouseup|scrollEvent|keyCode|parentNode|complete|oncontextmenu|000|msgCls|joinBtn|html|cursor|ym_btnContent|autoClose|u5927|shadow|on|btnl|CANCEL|nbsp|okTxt|alert|10000|Alpha|Object|cancelTxt|mr|readyState|u95ed|ymPrompt_max|preventDefault|u5c0f|maskAlphaColor|maxBtn|activeElement|getPos|offX|offY|keydownEvent|call|clearInterval|scrollTop|setInterval|javascript|hidden|dragOut|b|g|l|4|7|8'.split('|'),255,259,{},{}))
1.3,其中图片文件(见附件).
2,在主页面中onClick事件内容:
ymPrompt.win('<br><br><div align=\'center\'> <div class=\'myContent\'><textarea rows=\'5\' cols=\'25\' id=\'ta\' onPropertyChange="textCounter(\'ta\',\'wo\')"></textarea><br><br>限50字以内! 剩余字数:<input id=\'wo\' value=\'50\' readonly type=\'text\' size=\'4\' maxlength=\'3\' style=\'background-color:#eaffe0;border:0;color:red\'><br><br><input type=\'button\' value=\'保存原因\' class=\'input_img\' /></div></div>',300,200,'请输入删除原因');
//其中单引号需要转义。(/')
//弹出原因方法
function inputReason(){
var reason = document.getElementById("ta").value;//得到弹出文本框中输入的内容
ymPrompt.close();//将弹出窗口关闭,一下是将弹出输入框的内容放到指定控件内。
var arrObj=document.all.requestReson;
if("undefined"==typeof arrObj.length){
arrObj.value=reason;
}else{
arrObj[arrObj.length-1].value=reason;
}
}
这里需要注意的就是ymPrompt.css文件中的图片引用要正确。