JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果

更新時(shí)間：2015年09月21日 15:48:19 作者：企鵝

這篇文章主要介紹了JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果,涉及JavaScript彈出窗口的設(shè)置及頁面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果。分享給大家供大家參考。具體如下：

這里推薦給大家一款真心不錯(cuò)的JavaScript網(wǎng)頁彈出層，仿微博JS彈出層可關(guān)閉，點(diǎn)擊按鈕才彈出來，可制作成網(wǎng)頁客服之類的，比如在網(wǎng)頁的右側(cè)顯示這么一個(gè)按鈕，當(dāng)點(diǎn)擊的時(shí)候，展開層，顯示客服QQ，效果還是很不錯(cuò)的！

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-f-weibo-close-able-alert-codes/

具體代碼如下：

<!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" content="text/html; charset=gb2312" />
<title>圓角彈出層DIV CSS</title>
<style>
body{ font-size:12px;}
.tit{ font-size:14px; padding:0; margin:0; height:31px; line-height:31px; background: url(images/titbg.gif) center top repeat-x #CBE4EF;}
.tit b{ float:left; margin-left:15px;}
.tit a{ float:right; margin-right:5px; margin-top:6px; display:inline;}
a.cls{height:18px; width:18px;display:block; overflow:hidden; line-height:200px;}
.nr{padding:10px; text-align:left;}
a.cls,a.cls:link,a.cls:visited{background:url(images/cls.gif) center 0 no-repeat;}
a.cls:hover{background:url(images/cls.gif) center -20px no-repeat;}
.box{ border:1px #999999 solid; background:#FFF;}
/*圓角邊框*/
.lt,.rt,.lb,.rb{ background-image:url(images/abg.png);filter:alpha(opacity=10);-moz-opacity:.1;opacity:.1;line-height:0;}
.lt,.rt,.lb,.rb{ height:6px;width:6px;}.t,.b,.l,.r{ background:#000000;filter:alpha(opacity=10);-moz-opacity:.1;opacity:.1;line-height:0;}
.l,.r{width:6px;}.t,.b{height:6px;}.lt{ background-position:0 0;}.rt{ background-position:right 0;}.lb{ background-position:0 bottom;}.rb{ background-position:right bottom;}
/*小三角*/
s{position:absolute;top:-13px;*top:-13px;left:50px;display:block;height:0;width:0;font-size:0; line-height: 0;border-color:transparent transparent #666 transparent;border-style:dashed dashed solid dashed;border-width:10px;}
i{position:absolute;top:-9px;*top:-9px;left:-10px;display:block;height:0;width:0;font-size: 0;border-width:10px;
line-height: 0;border-color:transparent transparent #FFF transparent;border-style:dashed dashed solid dashed;}
.open{ position:relative; width:150px; height:25px;line-height:180%; border:1px solid #FF9900; background:#FFCC00;margin:12% auto 0 400px; text-align:center;}
.open span{cursor:pointer; display:block; width:100%;}
.odiv{ position:absolute; top:29px; left:-1px; width:300px;}
</style>
<script type="text/javascript">
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
 if(shutAble) return;
 targetObj.style.display="none";
 if(openTip && shutTip){
 sourceObj.innerHTML = shutTip; 
 }
} else {
 targetObj.style.display="block";
 if(openTip && shutTip){
 sourceObj.innerHTML = openTip; 
 }
}
}
</script>
</head>
<body>
<div class="open"><span onclick="openShutManager(this,'box',false,'點(diǎn)擊這里，關(guān)閉層','點(diǎn)擊這里，彈出層')">點(diǎn)擊這里，彈出層</span>
<div class="odiv" id="box" style="display:none"><table border="0" cellpadding="0" cellspacing="0">
 <tr><td class="lt"></td><td class="t"></td><td class="rt"></td></tr><tr><td class="l"></td><td class="box">
  <h3 class="tit"><b>這里是標(biāo)題</b><a class="cls" href="javascript:;" onclick="openShutManager(this,'box',false)" title="關(guān)閉">關(guān)閉</a></h3>
  <div class="nr"> 提示：<br />
   1、在代碼狀態(tài)下使用[html][/html]可以貼“代碼運(yùn)行”的代碼。并禁用發(fā)帖左側(cè)的 URL 識(shí)別和標(biāo)簽解析<br />
   2、技術(shù)版面請(qǐng)勿灌水。特別受歡迎的主題可以頂一頂，但是請(qǐng)接受版主的定期“擦水”，這是為了減少技術(shù)討論區(qū)出現(xiàn)的無效信息。<br />
   3、如需要收藏主題，請(qǐng)使用主題右上角的鏈接，還可以推薦給論壇里的朋友。<br />
   <b>此方法簡單，自適應(yīng)內(nèi)容高寬，易方便改風(fēng)格。</b>
   </div>
   </td><td class="r"></td></tr><tr><td class="lb"></td><td class="b"></td><td class="rb"></td></tr></table><s><i></i></s>
   </div>
</div>
</body>
</html>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: