Alert 效果(Js+CSs模拟)_层和布局特效

缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾剧懓顪冪€ｎ亝鎹ｉ柣顓炴闇夐柨婵嗙墱閸ゅ绻涘顔荤凹闁哄懏绻堥弻娑氫沪閻愵剛娈ら梺鍛婃⒒閺佸摜妲愰幘瀛樺闁圭粯甯婃竟鏇㈡⒒娴ｄ警鏀板ù婊庡墴椤㈡路閻涚S闂傚倸鍊搁崐宄懊归崶褏鏆﹂柣銏⑶圭粣妤呮煙閹殿喖顣奸柛瀣剁節閺屾洘寰勯崼婵嗗濠电偞鍨惰彜闁衡偓娴犲鍊甸柨婵嗗暙婵＄兘鏌涚€ｎ偅宕岀€规洘甯￠幃娆撳蓟閵夈儲鏆梻鍌欑閹碱偄煤閵娾晛纾婚柣鎰劋閸婂灚銇勯幒鍡椾壕闂佸疇顫夐崹鍧楀箖濞嗘挸鐭楀鑸瞪戦敍渚€姊绘担瑙勫仩闁告柨閰ｅ畷浼村冀瑜滈崵鏇炩攽閻樺磭顣查柡鍛倐閺屻劑鎮ら崒娑橆伓濠电姷鏁告慨鐑藉极閹间礁纾婚柣鎰惈閸ㄥ倿鎮规潪鎷岊劅婵炲吋鐗犻幃宄扳枎韫囨搩浼€闂佺粯绻傞悥濂稿蓟濞戙垹鐒洪柛鎰典簴濡插牓姊虹紒妯诲鞍闁挎洏鍨藉濠氬灳閹颁礁鎮戦柟鑲╄ˉ閳ь剙纾鎴︽⒒娴ｇ懓鈻曢柡鈧潏鈺傛殰闁跨喓濮撮拑鐔兼煏婵炵偓娅嗛柛瀣閺屾稓浠﹂崜褉妲堝銈呴獜閹凤拷缂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕闁芥ɑ绻堝娲敆閳ь剛绮旂€靛摜鐜绘俊銈呮噺閻撴瑩姊洪銊х暠濠⒀囩畺閺屻倝寮堕幐搴′淮闂佸搫鏈惄顖涗繆閻戠瓔鏁婇柣鎾冲瘨濞艰崵绱撻崒娆掝唹闁稿鎸搁…鍧楁嚋闂堟稑顫嶉梺缁樻尭閸熸挳寮婚弴鐔风窞闁割偅绻傞‖澶愭⒑缂佹ḿ绠ュù婊庝邯瀵鏁愰崨顏呮杸闂佸湱鍋撳ḿ娆擃敂閿燂拷闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣椤愪粙鏌ㄩ悢鍝勑㈢痪鎯ь煼閺屾盯寮撮妸銉р偓顒勬煕閵夛絽濡界紓宥呮喘閺屽秹宕崟顐ｆ濡炪倧瀵岄崹杈╂崲濠靛顫呴柨婵嗘閵嗘劙姊洪崫鍕⒈闁告挾鍠庨悾宄拔旈埀顒勩偑娴兼潙閱囬柣鏂挎惈楠炴劙姊绘担瑙勫仩闁稿寒鍨跺畷婵嗩吋婢跺鍓梺纭呮彧闂勫嫰鍩涢幒鎴唵閻犺櫣灏ㄩ崝鐔煎极閸儲鈷戦柛婵嗗椤箓鏌涙繝鍐ⅹ瀹€锝堝劵缁犳稑鈽夊Ο婧炬櫊閺屻劑寮崒婊冪濡炪們鍎茬粙鎾舵閹捐纾兼繛鍡樺灥婵′粙姊洪崫銉ヤ粶妞ゎ厾鍏橀悰顔跨疀濞戞瑦娅㈤梺璺ㄥ櫐閹凤拷闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘ｅ亾妤犵偞鐗犻、鏇㈡晝閳ь剟鎮块鈧弻锝呂旈埀顒勬偋婵犲洤鐭楅煫鍥ㄧ⊕閻撴瑧绱撴担闈涚仼闁哄绋掓穱濠囨倷閹殿喚鐓撻梺鍝勫閳ь剚鍓氶崥瀣箹缁厜鍋撻懠顒佹櫦闂傚倷绀侀幉锟犮€冮崱娆忔瀳鐎广儱娲﹀畷鍙夌箾閹存瑥鐏╂鐐灪娣囧﹪顢涘┑鎰闂傚倸顦粔鎾煘閹达富鏁嬮柛鈩冪懅钃遍梻浣告啞濮婂綊銆冩繝鍥ф槬闁逞屽墯閵囧嫰骞掗幋婵囩亾濠电偛鍚嬮崝娆撳蓟閻旂⒈鏁婇柤娴嬫櫅閻撶喖鎮楃憴鍕婵炶尙鍠栧濠氬幢濡ゅ﹤鎮戦梺鍛婁緱閸ㄦ娊宕㈤鍕拻濞达綀濮ょ涵鍫曟煕閿濆繒鐣垫鐐茬箻閺佹捇鏁撻敓锟�,闂傚倸鍊搁崐鎼佸磹瀹勬噴褰掑炊椤掍礁鍓銈嗗姧缁犳垹绮堢€ｎ偁浜滈柟鎵虫櫅閻忊晝鎮鈧缁樻媴缁涘娈┑顔斤公缁犳捇鏁愰悙鏉戠窞閻庯綆鍓涢鏇熺節閻㈤潧孝闁稿妫濆畷鐢稿即閵忥紕鍘卞銈嗗姧缁插墽绮堥埀顒傜磽娴ｆ彃浜鹃梺鍛婂姀閺傚倹绂嶅⿰鍫熺厸闁稿本姘ㄦ禒銏ゆ煙椤旇棄鐏﹂柕鍥у缁犳盯寮撮悙瀵糕偓鍓х磽娴ｈ櫣甯涢柣鈺婂灦閻涱喚鈧綆鍠楅崐鐑芥煛婢跺鐏╂繛鍫涘€濆缁樻媴閸涢潧缍婇、鏍幢濞戞ḿ顔夐梺鎼炲劀鐏炲墽绋侀梻浣告啞缁诲倻鈧皜鍥у嚑閹兼番鍔嶉悡娆愩亜閺嵮勵棞閻庢凹鍠楃粋宥夘敂閸啿鎷绘繛杈剧到閹诧繝宕悙鐑樼厽闁绘梹娼欓崝銈夋煙楠炲灝鐏╅摶锝呫€掑鐓庣仩婵炲牄鍔嶇换婵嬫偨闂堟刀锝囩棯閺夎法效鐎殿喗鐓￠獮鏍ㄦ媴閸︻厼寮抽梻浣虹帛濞叉牠宕愰崷顓涘亾濮樼偓瀚�!

JavaScript+CSS仿Alert提示效果，点击链接后背景变黑，弹出一个提示层，当然也可以关闭，关闭后网页恢复正常颜色，为了符合WEB标准，提升网页浏览体验，目前大部分网站都已经抛弃了Alert，直接换为这种，而且还灵活，提示的内容可以自己定义，方便多了。

<!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>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<title>Alert效果</title>
<style>
*{ padding:0; margin:0; font-size:12px;}
#bg{background:#000000;opacity: 0.5;-moz-opacity:0.5; filter:alpha(opacity=60); width:100%; height:100%;position:absolute; top:0; left:0}
#info{height:0px; width:0px;top:50%; left:50%;position:absolute;  line-height:1.7}
#center{background:#fff;border:1px solid #217AC1; width:300px; height:100px; position:absolute; margin:-50px -150px;}
#center strong{ display:block; padding:2px 5px; background:#EBF4FC; color:#519FEE;}
#center p{padding:10px; text-align:center; color:#1C6FB8;}
</style>
</head>
<body>
<span id="boxs"></span>
<script>
function boxs(v){
 window.scrollTo(0,0);
 var bo = document.getElementsByTagName('body')[0];
 var ht = document.getElementsByTagName('html')[0];
 var boht = document.getElementById('boxs');    
 boht.innerHTML = '';
 bo.style.height='auto';
 bo.style.overflow='auto';
 ht.style.height='auto'; 
 if(v == 1){   
  bo.style.height='100%';
  bo.style.overflow='hidden';
  ht.style.height='100%';  
  boht.innerHTML = '<div id="bg"></div><div id="info"><div id="center"><strong>模板无忧提示：</strong><p><a href="javascript:boxs(0);">关了我吧！</a></p></div></div>';   
 }
} 
boxs(1);
</script>
<a href="javascript:boxs(1);">点这里弹出</a>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-11-15

[收藏][报错][返回列表]

评论加载中....

Alert 效果(Js+CSs模拟)_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些