短網址
發表留言
源碼分享
人氣 5081°c

highslide自動彈出提示窗口一天只顯示一次

HighSlide組件可以很方便地做出以前做不了的網頁特效，這次筆者找來了比較實用的效果，

如果你的網站有更新的提示或公告信息，又或者想給用戶看到一則歡迎信息的話，

在24小時或一天或更長的時間只顯示一次的，只要使用HighSlide組件+Cookies的記錄

就能夠很方便地做到理想的highslide auto open (popup) 效果了。

代碼如下︰

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="http://demo.joomlart.com/extensions15/plugins/content/highslide/highslide-styles.css" type="text/css" />
<script type='text/javascript' src='http://demo.joomlart.com/extensions15/plugins/content/highslide/highslide-full.packed.js'></script>
<script type='text/javascript' src='http://demo.joomlart.com/extensions15/plugins/content/highslide/swfobject.js'></script>
<script type='text/javascript' src='http://demo.joomlart.com/extensions15/plugins/content/highslide/do_cookie.js'></script>
<script type='text/javascript'>
hs.graphicsDir = 'http://demo.joomlart.com/extensions15/plugins/content/highslide/graphics/';
hs.showCredits = true;
hs.outlineType = 'rounded-white';
hs.loadingText = 'Loading...';
</script>
</head>
<body>
<div id="contenthere2" style="display:none;"><img src="" border="0" style="float:left; padding-right:10px" /><br>歡迎你蒞臨本網站!<br>We welcome you to visit our website!</div>
<a href="#anco" id="href_831926588" onclick="if(!hs.htmlExpand(this, { contentId: 'highslide-html-href_831926588',outlinetype:'rounded-white',width:400,height:320,captiontext:'This is demo content'})) display_none('li_href_831926588'); return false;">
<!--<h2>Click me to display content 按次再次顯示</h2>-->
</a>
<div class="highslide-html-content" id='highslide-html-href_831926588'>
<div class="highslide-header" >
<ul >
<li class="highslide-move">
<a href="#" onclick="return false">移動</a>
</li>
</ul>
</div>
<div class="highslide-body" id="914032159">
<script type='text/javascript'>
if(document.getElementById('contenthere2')!=null){
hs.outlineWhileAnimating = true;
document.getElementById('914032159').innerHTML = document.getElementById('contenthere2').innerHTML;
document.getElementById('contenthere2').innerHTML ='';
}
</script>
</div>
<hr/>
<div class="highslide-footer" style="margin-top:-10px; height:23px;">
<div>
<span class="" title="Resize" >
<span>
<ul id="ul_footer">
<li class="highslide-close" style="top:3px; float:right" >
<a href="#" onclick="check_close('href_831926588',7, '40c092e58beeb79ddfa5919bb2345b4a');return hs.close(this)">關閉</a>
</li>
</ul>
</span>
</span>
</div>
</div>
</div>
<script type='text/javascript'>
function load_html_cookie(){
window.load = hs.htmlExpand(document.getElementById('href_831926588'), {contentId: 'highslide-html-href_831926588',outlinetype:'rounded-white',width:400,height:320,captiontext:'This is demo content'});
if(1>0){
Set_Cookie( '40c092e58beeb79ddfa5919bb2345b4a', true, 1, '/', '', '' );
}
}
if(!Get_Cookie('40c092e58beeb79ddfa5919bb2345b4a')){
setTimeout(load_html_cookie, 5000);
}
</script>
</body>
</html>

範例文件下載︰ 按我一下!

HighSlide組件下載︰www.highslide.com

演示圖片︰

結語︰
5000 時間(秒)
width:400 寬
height:320 高
或者如果你懂得html+CSS，可以輕易地把彈出的框架修改美化的。

相關文章︰
highslide自動點擊並跳出框架
標籤：