首頁(yè) 新隨筆新文章聯(lián)系

2012年2月

日

一

二

三

四

五

六

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

1

2

3

4

5

6

7

8

9

10

blog是收集資料并且作為技術(shù)交流的平臺(tái)，發(fā)布一些本人常用資料或開發(fā)經(jīng)驗(yàn)，希望能和大家一起討論、進(jìn)步。

訪問統(tǒng)計(jì)

留言簿(6)

我參與的團(tuán)隊(duì)

牛虻(0/0)

隨筆檔案(8)

文章分類(149)

新聞分類(1)

鐵血軍事(1)

相冊(cè)

收藏夾(21)

友情鏈接

我的鏈接

搜索

積分與排名

積分 - 150770
排名 - 413

閱讀排行榜

評(píng)論排行榜

js觸發(fā)彈出層

如何實(shí)現(xiàn)運(yùn)行代碼框功能

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>messagBox</title>
<style>
#messWindow{
position:absolute;z-index:1;filter:alpha(opacity=0);background-color:#000000;visibility:hidden;
}
#promptWindow{
position:absolute; z-index:3; width: 540px; height:300px;background-color:#fff;display:none;
}
#titleBar{
background-color:#f1edcf;color:#000;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px; width:540px;height:22px;line-height:22px;
}
#titleBar span{
float:left; cursor:hand;
font-weight:normal;
}
#mainContent{
width:540px;height:255px;
}
#bottomBar{
background-color:#f7f7f7; width:540px; height:23px;
}
#bottomBar span{
float:right;
}
</style>
</head>
<body topmargin=0 leftmargin=0>
<div   class="wmqeeuq"   id="messWindow"></div>
<div   class="wmqeeuq"   id="promptWindow" align="center">
  <div  id="titleBar"><span onClick="hide()">×</span><span>   標(biāo)題欄</span></div>
  <div  id="mainContent">主要顯示區(qū)域</div>
  <div  id="bottomBar"><span>
    <input type="button" value=" 關(guān) 閉 " onClick="hide()" />
    </span> </div>
  <!-- <iframe style="position:absolute; visibility:inherit; top:0px; left:0px; width:540px; height:300px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>-->
</div>
<li><a href="#" onClick="show()">觸發(fā)彈出層</a></li>
<script type="text/javascript">
var obj=document.getElementById("messWindow")
var  t = new Object();
function show(){
 obj.style.visibility="visible";
 obj.style.width=document.documentElement.clientWidth  /* document.body.clientWidth */;
 obj.style.height=document.documentElement.clientHeight;
 document.getElementById('promptWindow').style.top= (document.documentElement.offsetHeight-300)/2;
 document.getElementById('promptWindow').style.left= (document.documentElement.offsetWidth-540)/2;
 document.getElementById('promptWindow').style.display='block';
 if(obj.filters.alpha.opacity>5){
  obj.filters.alpha.opacity=25;
  clearTimeout(t.timer1);
  return;
 }else{
  obj.filters.alpha.opacity+=5;
  t.timer1=setTimeout("show()",5)
 }
 return;
}
function hide(){
    // alert();
 if(obj.filters.alpha.opacity<=0){
  obj.filters.alpha.opacity=0;
  obj.style.visibility="hidden"
  document.getElementById('promptWindow').style.display='none';
  clearTimeout(t.timer2)
  return;
 }else{
  obj.filters.alpha.opacity-=5;
  t.timer2=setTimeout("hide()",5);
 }
 return;
}
</script>
</body></html>

[提示：你可先修改部分代碼，再按運(yùn)行]

---------------------------------------------------------------------------------------------------------------------------------
說人之短，乃護(hù)己之短?？浼褐L(zhǎng)，乃忌人之長(zhǎng)。皆由存心不厚，識(shí)量太狹耳。能去此弊，可以進(jìn)德，可以遠(yuǎn)怨。
http://www.aygfsteel.com/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------

posted on 2007-12-10 17:21 宋針還閱讀(1122) 評(píng)論(1) 編輯收藏所屬分類: JAVASCRIPT

FeedBack:

# re: js觸發(fā)彈出層

2012-02-09 10:43 | 將風(fēng)度養(yǎng)成

有用！回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: JS屏蔽功能類 javascript table delete row javascript insert table row JQuery技巧總結(jié)(轉(zhuǎn)載) JS實(shí)現(xiàn)table里單元格排序模擬QQ菜單效果 js觸發(fā)彈出層 javascript框架編程仿MSN效果 FOCUS效果輸入框