<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Demo for jQuery Custom PopUp Window</title><style type="text/css">/*Geovin Du: Style you custom popupbox according to your requirement */.popupbox { width:500px; height:300px; background-image:url(images/pop-up_03.png); background-repeat:no-repeat; display: none; /* Hidden as default */ float: left; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000;}.popupbox2 { width:454px; height:307px; background-image:url(images/pu_03.png); background-repeat:no-repeat; display: none; float: left; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000;}.popupbox3 { width:502px; height:302px; background-image:url(images/3_03.png); background-repeat:no-repeat; display: none; float: left; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000;}#fade { display: none; /* Hidden as default */ background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999;}#intabdiv {text-align:center;}#intabdiv {padding:30px 30px 30px 30px;}#intabdiv2 {padding:70px;}#intabdiv2 h2 {font-size:24px;color:#696868;font-family:Verdana, Geneva, sans-serif;}#intabdiv2 p {font-size:12px;color:#696868;font-family:Verdana, Geneva, sans-serif;line-height:20px;}#intabdiv3 {padding:70px;}#intabdiv3 h2 {font-size:24px;color:#fff;font-family:Verdana, Geneva, sans-serif;}#intabdiv3 p {font-size:12px;color:#fff;font-family:Verdana, Geneva, sans-serif;line-height:20px;}#closeThis{margin-right:0px; float:right;padding-right:10px;padding-top:5px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><script type="text/javascript">//http://www.htmldrive.net/categorys/show/12/Lightbox-Dialog-Overlay$(document).ready(function() { // Here we will write a function when link click under class popup $('a.popup').click(function() { // Here we will describe a variable popupid which gets the// rel attribute from the clicked link var popupid = $(this).attr('rel'); // Now we need to popup the marked which belongs to the rel attribute// Suppose the rel attribute of click link is popuprel then here in below code// #popuprel will fadein$('#' + popupid).fadeIn(); // append div with id fade into the bottom of body tag// and we allready styled it in our step 2 : CSS$('body').append('<div id="fade"></div>');$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); // Now here we need to have our popup box in center of// webpage when its fadein. so we add 10px to height and widthvar popuptopmargin = ($('#' + popupid).height() + 10) / 2;var popupleftmargin = ($('#' + popupid).width() + 10) / 2; // Then using .css function style our popup box for center allignment$('#' + popupid).css({'margin-top' : -popuptopmargin,'margin-left' : -popupleftmargin});});// Now define one more function which is used to fadeout the // fade layer and popup window as soon as we click on fade layer//關閉層，塗聚文修改 20130813$("div a.closeThis").click(function(){ $(this).parent().hide(); $('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut() return false;});$('#fade').click(function() {// Add markup ids of all custom popup box here $('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()return false;});});</script><script type="text/javascript"> $(document).ready( function(){}); function hiden(){$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast}function slideToggle(){$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上}function show(){$("#divObj").show();//显示,参数说明同上}function toggle(){$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上}function slide(){$("#divObj").slideDown();//窗帘效果展开}</script></head><body><h3>div里内容的显示隐藏特效</h3><input type="button" value="隐藏" onclick="hiden()"/><input type="button" value="显示" onclick="show()"/><input type="button" value="窗帘效果显示2" onclick="slide()"/><input type="button" value="窗帘效果的切换" onclick="slideToggle()"/> <input type="button" value="隐藏显示效果切换" onclick="toggle()"/><div id="divObj" style="display:none"> 1.测试例子<br/> 2.测试例子<br/> 3.测试例子<br/> 4.测试例子<br/> 5.测试例子<br/> 6.测试例子<br/> 7.测试例子<br/> 8.测试例子<br/> 9.测试例子<br/> 0.测试例子<br/> </div><h1><a href="#" rel="popuprel" class="popup">Click Here for 1st Custom Modal Window</a></h1><h1><a href="#" rel="popuprel2" class="popup">Click Here for 2nd Custom Modal Window</a></h1><h1><a href="#" rel="popuprel3" class="popup">Click Here for 3rd Custom Modal Window</a></h1> <div class="popupbox" id="popuprel"><a href="#" class="closeThis" id="closeThis"><img src="images/close_pop.png" alt=""/></a><div id="intabdiv"> <h2>天下為公 </h2> <p> why we only heard about haves and have-nots,why we didn't heard about doers and doer-nots.人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种整合.学习是一种成长.逻辑和美都关注封闭的事实,我们的生活则是发现的经验中度过的.....$经一番挫折,长一番识见.容一番横逆,增一番器度.省一番经营,多一分道义.学一分退让,讨一分便宜.去一分奢侈,少一分罪过.加一分体贴,知一分物情</p> </div></div> <div class="popupbox2" id="popuprel2"><a href="#" class="closeThis" id="closeThis"><img src="images/close_pop.png" alt=""/></a><div id="intabdiv2"> <h2>塗聚文</h2> <p> 哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构(分析)整合学习, 情商(EQ)运筹(学)成功,信息流,物流,人力资源流,资本流的系统解决方案的开发与设计.</p> </div></div> <div class="popupbox3" id="popuprel3"><a href="#" class="closeThis" id="closeThis"><img src="images/close_pop.png" alt=""/></a><div id="intabdiv3"> <h2>捷為工作室</h2> <p>￡捡垃圾,就是我的一生渴求. ￡并且喜欢这句"书中自有黄金屋,书中自有颜如玉,书中自有千钟黍,书中车马多簇簇"的感慨."读书长见识,行路广阅历",是一个"悟"字. ＄自然是我最想追求的"偶像". ￥读者是,读之者,者之读.一沙一世界! ￥to be is to do举世皆清我独浊,众人皆醒我独醉</p> </div></div><div id="fade"></div></body></html>
