`

公告弹出页面 和 tip

 
阅读更多

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <script src="./jquery-1.3.1.js" type="text/javascript"></script>

    

    <script src="./data.js" type="text/javascript"></script>

    

    <script type="text/javascript">

//等待dom元素加载完毕.

 

function showDiv(obj){

 $(obj).show();

 center(obj);

 $(window).scroll(function(){

  center(obj);

 });

 $(window).resize(function(){

  center(obj);

 }); 

}

 

function center(obj){

 var windowWidth = document.documentElement.clientWidth;   

 var windowHeight = document.documentElement.clientHeight;   

 var popupHeight = $(obj).height();   

 var popupWidth = $(obj).width();    

 $(obj).css({   

  "position": "absolute",   

  "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),   

  "left": (windowWidth-popupWidth)/2   

 });  

}

 

</script>

 

</head>

<body>

 

 

 

 

</body>

</html>

    

 

 

------------------data.js-------------------------------

$(document).ready(function(){

$("body").append("<div id=\"notice\" style=\"display:block;position:absolute;\"><iframe src=\"ad.html\" width=\"300px\" height=\"300px\"/><\/div><script type=\"text/javascript\">showDiv($(\"#notice\"));<\/script>");

});

 

 

--------------弹出tip的页面---------------------

<!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=utf-8" />

<title>zishu test tip</title>

<style>

/* zishu.cn */

*{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;}

#info{padding:50px;}

 

/*以是下显示TIP的内容*/

#infobox span{ display: none; }

#infobox a:hover span{display: block;position:absolute;border:1px solid #640000;background: #FFFFCC;margin-top:26px!important; margin-top:20px;color:#000;padding:5px;white-space: nowrap;}

</style>

</head>

<body>

<div id="info">

   <div id="infobox">

     <a href="javascript:void(0);"><span>从这里可以进入我的首页！</span>网站首页</a>

   </div>

</div>

</body>

</html>

 

 

分享到：
| 自动化部署和日志分析工具
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics