比較成熟的有thickbox,支持ajax技術,采用jquery
另在網(wǎng)中搜羅了三種較好的js效果:
1.
??1
<div?style="height:100%;">
??2<img?src="http://www.passport.35.com/images/logout_s.gif;jsessionid=VB_WieF2RHffbzgp"?border="0"?style="cursor:hand"?title="退出35Passport"?onclick="showConfirmMsg1()"?/>
??3</div>
??4<script>
??5
??6????function?isObject(obj)
{
??7
????????if?(obj?!=?null?&&?typeof(obj)?!=?"undefined")
??8????????????return?true;
??9????????else
?10????????????return?false;
?11
????}
?12????
?13????function?focusFirstElement(formName){
?14????????var?form?=?document.forms[formName];
?15????????if?(!isObject(form)?||?form.tagName?!=?"FORM")
?16????????????return;
?17????????????
?18????????var?elements?=?form.elements;
?19
????????for?(var?i?=?0;?i?<?elements.length;?i++)?{
?20????????????if?(elements[i].type?==?'text'?&&?!elements[i].disabled)?{
?21????????????????elements[i].focus();
?22????????????????break;
?23
????????????}
?24????????}
?25????}
?26????
?27????function?fillNumbericOptions(start,?end,?val){
?28????????var?str?=?"";
?29????????for?(var?i=start;?i<=end;?i++){
?30????????????str?+=?"<option?value='"?+?i?+?"'"?;
?31????????????if?(i?==?val)
?32????????????????str?+=?"?selected";
?33????????????str?+=?"?>"?+?i?+?"</option>";
?34????????}
?35
?36????????document.write?(str);
?37????}
?38????
?39????function?fillOptions(data,?val){
?40????????var?str?=?"";
?41????????for?(var?i=0;?i<data.length;?i++){
?42????????????
?43????????????str?+=?"<option?value='"?+?data[i][0]?+?"'"?;
?44????????????if?(data[i][0]?==?val)
?45????????????????str?+=?"?selected";
?46????????????str?+=?"?>"?+?data[i][1]?+?"</option>";
?47????????????
?48????????}
?49????????
?50????????document.write?(str);
?51????}
?52????
?53????function?fillQuestionOptions(val){
?54???????fillOptions(hintQuestionList,?val);
?55????}
?56????
?57????function?fillIDTypeOptions(val){
?58???????fillOptions(IDCardTypeList,?val);
?59????}
?60????
?61????function?fillSecureOptions(val){
?62????????
?63???????fillOptions(updateSecureList,?val);
?64????}
?65????
?66????function?getHintQuestion(val){
?67????????if?(val?==?"")
?68????????????return?val;
?69????????????
?70????????for?(var?i=0;?i<hintQuestionList.length;?i++){
?71????????????if?(hintQuestionList[i][0]?!=?""?&&?hintQuestionList[i][0]?==?val)
?72????????????????return?hintQuestionList[i][1];
?73????????}
?74????}
?75????
?76????function?getUpdateSecure(val){
?77????????if?(val?==?"")
?78????????????return?val;
?79????????????
?80????????for?(var?i=0;?i<updateSecureList.length;?i++){
?81????????????if?(updateSecureList[i][0]?!=?""?&&?updateSecureList[i][0]?==?val)
?82????????????????return?updateSecureList[i][1];
?83????????}
?84????}
?85????
?86????function?getIDCardType(val){
?87????????if?(val?==?"")
?88????????????return?val;
?89????????????
?90????????for?(var?i=0;?i<IDCardTypeList.length;?i++){
?91????????????if?(IDCardTypeList[i][0]?!=?""?&&?IDCardTypeList[i][0]?==?val)
?92????????????????return?IDCardTypeList[i][1];
?93????????}
?94????}
?95????
?96????function?getCountry(val){
?97????????if?(val?==?"")
?98????????????return?val;
?99????????
100????????for?(var?i=0;?i<countryList.length;?i++){
101????????????if?(countryList[i][0]?!=?""?&&?countryList[i][0]?==?val)
102????????????????return?countryList[i][1];
103????????}
104????}
105????
106????function?hideSelectForm(){
107????????var?opts?=?document.getElementsByTagName("SELECT");
108????????if?(opts?==?null?||?typeof(opts)?==?"undefined")
109????????????return?;
110????????????
111????????for?(var?i=0;?i<opts.length;?i++){
112????????????opts[i].style.visibility?=?"hidden";
113????????}
114????}
115????
116????function?showSelectForm(){
117????????var?opts?=?document.getElementsByTagName("SELECT");
118????????if?(opts?==?null?||?typeof(opts)?==?"undefined")
119????????????return?;
120????????????
121????????for?(var?i=0;?i<opts.length;?i++){
122????????????
123????????????opts[i].style.visibility?=?"visible";
124????????}
125????}
126????
127????function?createBgDiv(id){
128????????if?(!isObject(id))
129????????????id?=?"backgroundDiv";
130???????????
131????????offHeight?=?window.screen.height;
132????????var?div?=?document.createElement("DIV");
133????????div.id?=?id;
134????????div.style.left?=?0;
135????????div.style.top?=?0;
136????????div.style.width=document.body.scrollWidth;
137????????div.style.height?=?document.body.scrollHeight;
138????????div.style.position?=?"absolute";
139????????div.style.display?=?"";
140????????div.style.zIndex?=?"999";
141????????div.style.filter?=?"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
142????????div.style.backgroundColor="#777";
143????????document.body.appendChild(div);
144????????hideSelectForm();
145????????
146????????fadeBg(10,?id);
147????????
148????????return?div;
149????}
150????
151????function?fadeBg(index,?str){
152????????var?obj?=?document.getElementById(str);
153????????obj.style.filter?=?"alpha(Opacity="?+?index?+?")";
154????????
155????????if?(index?<?50)
156????????????window.setTimeout("fadeBg("?+?(index+5)?+?",?'"?+?str?+?"')",?10);
157????????
158????}
159</script>
160????????????????????????<div?id="logoutInfoDiv"?style="display:none;?"></div>
161????????????????????????<script?language="javascript">
162????????????????????????????function?showConfirmMsg1(){
163????????????????????????????????if?(!isObject(document.getElementById("logoutDiv")))
164????????????????????????????????????????createBgDiv("logoutDiv");
165??????????????????????????????????????
166????????????????????????????????????var?infoDiv?=?document.getElementById("logoutInfoDiv");
167????????????????????????????????????
168????????????????????????????????????infoDiv.innerHTML?=?generateConfirmLogoutMsg();
169????????????????????????????????????
170????????????????????????????????????with(infoDiv.style){
171????????????????????????????????????????zIndex?=?1000;?
172????????????????????????????????????????position?=?"absolute";?
173????????????????????????????????????????width?=?"300px";
174????????????????????????????????????????top?=?(document.body.offsetHeight-150)/2?+?document.body.scrollTop;?
175????????????????????????????????????????left?=?(document.body.offsetWidth-400)/2;
176????????????????????????????????????????border?=?"1px?#4372A5?solid";?
177????????????????????????????????????????padding?=?"10px";?
178????????????????????????????????????????backgroundColor?=?"#ffffff";?
179????????????????????????????????????????filter?=?"Alpha(Opacity=90)";
180????????????????????????????????????????display?=?"block";
181????????????????????????????????????}
182????????????????????????????????????
183????????????????????????????}
184????????????????????????????
185????????????????????????????function?cancelLogout(){
186????????????????????????????????var?aa?=?document.getElementById("logoutDiv");
187????????????????????????????????var?infoDiv?=?document.getElementById("logoutInfoDiv");
188????????????????????????????????????infoDiv.style.display?=?"none";
189????????????????????????????????
190????????????????????????????????if?(isObject(aa))
191????????????????????????????????????document.body.removeChild(aa);?????
192????????????????????????????????
193????????????????????????????????showSelectForm();
194???????????????????????????}
195???????????????????????????????
196????????????????????????????function?generateConfirmLogoutMsg(){
197????????????????????????????????var?msg?=?"";
198????????????????????????????????
199????????????????????????????????msg?+=?'<table?width="400"??border="0"?cellspacing="0"?cellpadding="0"?>';
200????????????????????????????????msg?+=?'<tr>';
201????????????????????????????????msg?+=?'<td?bgcolor="DEE8F3"?class="Bold_font"?height="30"> 確認退出</td>';
202????????????????????????????????msg?+=?'</tr>';
203????????????????????????????????msg?+=?'<tr>';
204????????????????????????????????msg?+=?'<td?align="left"?> </td>';
205????????????????????????????????msg?+=?'</tr>';
206????????????????????????????????msg?+=?'</table>';
207????????????????????????????????msg?+=?'<table?width="400"??border="0"?cellspacing="0"?cellpadding="0"?>';
208????????????????????????????????msg?+=?'<tr>';
209????????????????????????????????msg?+=?'<td?class="register"?height="30"?align="left">您確定要退出35通行證嗎？</td>';
210????????????????????????????????msg?+=?'</tr>';
211????????????????????????????????msg?+=?'<tr>';
212????????????????????????????????msg?+=?'<td?align="center"?>';
213????????????????????????????????msg?+=?'<input?id="submitB"?type="submit"?value="?退?出?"?name="input"?class="buttomw"?onclick="window.location=\'http://login.passport.35.com/logout.srf?\'">? ';
214????????????????????????????????msg?+=?'<input?type="button"?value="?取?消?"?name="input"?class="buttomw"?onclick="cancelLogout()">';
215????????????????????????????????msg?+=?'</td>';
216????????????????????????????????msg?+=?'</tr>';
217????????????????????????????????msg?+=?'</table>';
218????????????????????????????????
219????????????????????????????????return?msg;
220?????????????????????????????}
221????????????????????????????</script>?
222
2232.
??1<div?style="height:100%;">
??2<img?src="http://www.passport.35.com/images/logout_s.gif;jsessionid=VB_WieF2RHffbzgp"?border="0"?style="cursor:hand"?title="退出35Passport"?onclick="showConfirmMsg1()"?/>
??3</div>
??4<script>
??5
??6????function?isObject(obj){
??7????????if?(obj?!=?null?&&?typeof(obj)?!=?"undefined")
??8????????????return?true;
??9????????else
?10????????????return?false;
?11????}
?12????
?13????function?focusFirstElement(formName){
?14????????var?form?=?document.forms[formName];
?15????????if?(!isObject(form)?||?form.tagName?!=?"FORM")
?16????????????return;
?17????????????
?18????????var?elements?=?form.elements;
?19????????for?(var?i?=?0;?i?<?elements.length;?i++)?{
?20????????????if?(elements[i].type?==?'text'?&&?!elements[i].disabled)?{
?21????????????????elements[i].focus();
?22????????????????break;
?23????????????}
?24????????}
?25????}
?26????
?27????function?fillNumbericOptions(start,?end,?val){
?28????????var?str?=?"";
?29????????for?(var?i=start;?i<=end;?i++){
?30????????????str?+=?"<option?value='"?+?i?+?"'"?;
?31????????????if?(i?==?val)
?32????????????????str?+=?"?selected";
?33????????????str?+=?"?>"?+?i?+?"</option>";
?34????????}
?35
?36????????document.write?(str);
?37????}
?38????
?39????function?fillOptions(data,?val){
?40????????var?str?=?"";
?41????????for?(var?i=0;?i<data.length;?i++){
?42????????????
?43????????????str?+=?"<option?value='"?+?data[i][0]?+?"'"?;
?44????????????if?(data[i][0]?==?val)
?45????????????????str?+=?"?selected";
?46????????????str?+=?"?>"?+?data[i][1]?+?"</option>";
?47????????????
?48????????}
?49????????
?50????????document.write?(str);
?51????}
?52????
?53????function?fillQuestionOptions(val){
?54???????fillOptions(hintQuestionList,?val);
?55????}
?56????
?57????function?fillIDTypeOptions(val){
?58???????fillOptions(IDCardTypeList,?val);
?59????}
?60????
?61????function?fillSecureOptions(val){
?62????????
?63???????fillOptions(updateSecureList,?val);
?64????}
?65????
?66????function?getHintQuestion(val){
?67????????if?(val?==?"")
?68????????????return?val;
?69????????????
?70????????for?(var?i=0;?i<hintQuestionList.length;?i++){
?71????????????if?(hintQuestionList[i][0]?!=?""?&&?hintQuestionList[i][0]?==?val)
?72????????????????return?hintQuestionList[i][1];
?73????????}
?74????}
?75????
?76????function?getUpdateSecure(val){
?77????????if?(val?==?"")
?78????????????return?val;
?79????????????
?80????????for?(var?i=0;?i<updateSecureList.length;?i++){
?81????????????if?(updateSecureList[i][0]?!=?""?&&?updateSecureList[i][0]?==?val)
?82????????????????return?updateSecureList[i][1];
?83????????}
?84????}
?85????
?86????function?getIDCardType(val){
?87????????if?(val?==?"")
?88????????????return?val;
?89????????????
?90????????for?(var?i=0;?i<IDCardTypeList.length;?i++){
?91????????????if?(IDCardTypeList[i][0]?!=?""?&&?IDCardTypeList[i][0]?==?val)
?92????????????????return?IDCardTypeList[i][1];
?93????????}
?94????}
?95????
?96????function?getCountry(val){
?97????????if?(val?==?"")
?98????????????return?val;
?99????????
100????????for?(var?i=0;?i<countryList.length;?i++){
101????????????if?(countryList[i][0]?!=?""?&&?countryList[i][0]?==?val)
102????????????????return?countryList[i][1];
103????????}
104????}
105????
106????function?hideSelectForm(){
107????????var?opts?=?document.getElementsByTagName("SELECT");
108????????if?(opts?==?null?||?typeof(opts)?==?"undefined")
109????????????return?;
110????????????
111????????for?(var?i=0;?i<opts.length;?i++){
112????????????opts[i].style.visibility?=?"hidden";
113????????}
114????}
115????
116????function?showSelectForm(){
117????????var?opts?=?document.getElementsByTagName("SELECT");
118????????if?(opts?==?null?||?typeof(opts)?==?"undefined")
119????????????return?;
120????????????
121????????for?(var?i=0;?i<opts.length;?i++){
122????????????
123????????????opts[i].style.visibility?=?"visible";
124????????}
125????}
126????
127????function?createBgDiv(id){
128????????if?(!isObject(id))
129????????????id?=?"backgroundDiv";
130???????????
131????????offHeight?=?window.screen.height;
132????????var?div?=?document.createElement("DIV");
133????????div.id?=?id;
134????????div.style.left?=?0;
135????????div.style.top?=?0;
136????????div.style.width=document.body.scrollWidth;
137????????div.style.height?=?document.body.scrollHeight;
138????????div.style.position?=?"absolute";
139????????div.style.display?=?"";
140????????div.style.zIndex?=?"999";
141????????div.style.filter?=?"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
142????????div.style.backgroundColor="#777";
143????????document.body.appendChild(div);
144????????hideSelectForm();
145????????
146????????fadeBg(10,?id);
147????????
148????????return?div;
149????}
150????
151????function?fadeBg(index,?str){
152????????var?obj?=?document.getElementById(str);
153????????obj.style.filter?=?"alpha(Opacity="?+?index?+?")";
154????????
155????????if?(index?<?50)
156????????????window.setTimeout("fadeBg("?+?(index+5)?+?",?'"?+?str?+?"')",?10);
157????????
158????}
159</script>
160????????????????????????<div?id="logoutInfoDiv"?style="display:none;?"></div>
161????????????????????????<script?language="javascript">
162????????????????????????????function?showConfirmMsg1(){
163????????????????????????????????if?(!isObject(document.getElementById("logoutDiv")))
164????????????????????????????????????????createBgDiv("logoutDiv");
165??????????????????????????????????????
166????????????????????????????????????var?infoDiv?=?document.getElementById("logoutInfoDiv");
167????????????????????????????????????
168????????????????????????????????????infoDiv.innerHTML?=?generateConfirmLogoutMsg();
169????????????????????????????????????
170????????????????????????????????????with(infoDiv.style){
171????????????????????????????????????????zIndex?=?1000;?
172????????????????????????????????????????position?=?"absolute";?
173????????????????????????????????????????width?=?"300px";
174????????????????????????????????????????top?=?(document.body.offsetHeight-150)/2?+?document.body.scrollTop;?
175????????????????????????????????????????left?=?(document.body.offsetWidth-400)/2;
176????????????????????????????????????????border?=?"1px?#4372A5?solid";?
177????????????????????????????????????????padding?=?"10px";?
178????????????????????????????????????????backgroundColor?=?"#ffffff";?
179????????????????????????????????????????filter?=?"Alpha(Opacity=90)";
180????????????????????????????????????????display?=?"block";
181????????????????????????????????????}
182????????????????????????????????????
183????????????????????????????}
184????????????????????????????
185????????????????????????????function?cancelLogout(){
186????????????????????????????????var?aa?=?document.getElementById("logoutDiv");
187????????????????????????????????var?infoDiv?=?document.getElementById("logoutInfoDiv");
188????????????????????????????????????infoDiv.style.display?=?"none";
189????????????????????????????????
190????????????????????????????????if?(isObject(aa))
191????????????????????????????????????document.body.removeChild(aa);?????
192????????????????????????????????
193????????????????????????????????showSelectForm();
194???????????????????????????}
195???????????????????????????????
196????????????????????????????function?generateConfirmLogoutMsg(){
197????????????????????????????????var?msg?=?"";
198????????????????????????????????
199????????????????????????????????msg?+=?'<table?width="400"??border="0"?cellspacing="0"?cellpadding="0"?>';
200????????????????????????????????msg?+=?'<tr>';
201????????????????????????????????msg?+=?'<td?bgcolor="DEE8F3"?class="Bold_font"?height="30"> 確認退出</td>';
202????????????????????????????????msg?+=?'</tr>';
203????????????????????????????????msg?+=?'<tr>';
204????????????????????????????????msg?+=?'<td?align="left"?> </td>';
205????????????????????????????????msg?+=?'</tr>';
206????????????????????????????????msg?+=?'</table>';
207????????????????????????????????msg?+=?'<table?width="400"??border="0"?cellspacing="0"?cellpadding="0"?>';
208????????????????????????????????msg?+=?'<tr>';
209????????????????????????????????msg?+=?'<td?class="register"?height="30"?align="left">您確定要退出35通行證嗎？</td>';
210????????????????????????????????msg?+=?'</tr>';
211????????????????????????????????msg?+=?'<tr>';
212????????????????????????????????msg?+=?'<td?align="center"?>';
213????????????????????????????????msg?+=?'<input?id="submitB"?type="submit"?value="?退?出?"?name="input"?class="buttomw"?onclick="window.location=\'http://login.passport.35.com/logout.srf?\'">? ';
214????????????????????????????????msg?+=?'<input?type="button"?value="?取?消?"?name="input"?class="buttomw"?onclick="cancelLogout()">';
215????????????????????????????????msg?+=?'</td>';
216????????????????????????????????msg?+=?'</tr>';
217????????????????????????????????msg?+=?'</table>';
218????????????????????????????????
219????????????????????????????????return?msg;
220?????????????????????????????}
221????????????????????????????</script>?
222