jmpopups与chickbox(带有附件可下载直接查看效果)
index.html<!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" /><script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script><script type="text/javascript">//<![CDATA[$.setupJMPopups({screenLockerBackground: "#003366",screenLockerOpacity: "0.7"});function openStaticPopup() {$.openPopupLayer({name: "myStaticPopup",width: 550,target: "myHiddenDiv"});}function openAjaxPopup() {$.openPopupLayer({name: "mySecondPopup",width: 300,url: "ajax_example.html"});}//]]></script><style type="text/css" media="screen">body {margin:0; font-family:"Trebuchet MS"; line-height:120%; color:#333;}h1 {margin-bottom:50px; font-size:40px; font-weight:normal;}p {margin:0; padding:0 0 30px; font-size:12px;}pre {font-size:12px; font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","Courier"; line-height:120%; background:#F4F4F4; padding:10px;}#general {margin:30px;}#myHiddenDiv {display:none;}.popup {background:#FFF; border:1px solid #333; padding:1px;}.popup-header {height:24px; padding:7px; background:url("bgr_popup_header.jpg") repeat-x;}.popup-header h2 {margin:0; padding:0; font-size:18px; float:left;}.popup-header .close-link {float:right; font-size:11px;}.popup-body {padding:10px;}form {margin:0; padding:0;}form * {font-size:12px;}input {margin-bottom:12px;}label {display:block;}</style><title>jmpopups - example page</title></head><body><div id="general"><h1>jmpopups - example page</h1><p>This is a page with a usage example of the library jmpopups. <br />For more details access <a href="http://jmpopups.googlecode.com" title="jmpopups" target="_blank">http://jmpopups.googlecode.com</a></p><code><pre>$.openPopupLayer({name: "mySecondPopup",width: 550,target: "myHiddenDiv"});</pre></code><p><a href="javascript:;" onclick="openStaticPopup()" title="Static example">Open a popup using a html content from a hidden element.</a></p><p>Did you find some bug? Please contact me! <a href="mailto:otavioavila@gmail.com" title="Otávio Avila">otavioavila@gmail.com</a></p></div><div id="myHiddenDiv"><div onclick="$.closePopupLayer('myStaticPopup')" title="Close" /></div><div onclick="openAjaxPopup()" title="Ajax example">Open a popup using ajax</a></p></div></div></div><script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-9616654-1");pageTracker._trackPageview();} catch(err) {}</script></body></html>?
<div onclick="$.closePopupLayer('mySecondPopup')" title="Close" /></div><div /><label>Field 2</label><input type="text" /><label>Field 3</label><select><option>Option 1</opion><option>Option 2</opion><option>Option 3</opion></select></fieldset></form></div></div>?jmpopups需要引用jquery-1.3.2.min.js和jquery.jmpopups-0.5.1.js
?
?
?
?
thickbox
?
<!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>基于jQuery弹出层插件thickbox-懒人建站-http://www.51xuediannao.com</title><meta name="keywords" content="jquery特效,JS代码,js特效代码大全,导航菜单代码,焦点幻灯片,企业网页设计欣赏" /><meta name="description" content="懒人建站为您提供-基于jquery特效，jquery弹出层效果，js特效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。" /><script src="js/jquery-1.4.3.min.js" type="text/javascript"></script><script src="js/thickbox-compressed.js" type="text/javascript"></script><link href="style/thickbox.css" media="screen" rel="stylesheet" type="text/css" /></head><body><input alt="jmpopups与chickbox(带有附件可上载直接查看效果)" title="点击弹出隐藏层" type="button" value="点击弹出隐藏层" /> <a href="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="点击弹出隐藏层" type="button">点击弹出隐藏层</a><div id="myOnPageContent" style="display:none;"><p>Jquery 特效_JS代码_JS广告代码_下拉菜单代码-懒人建站 http://www.51xuediannao.com</p><p>懒人建站为您提供-基于jquery特效，jquery弹出层效果，js特效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。</p><p><a href="http://www.51xuediannao.com">jQuery</a> | <a href="http://www.51xuediannao.com">jquery特效</a> | <a href="http://www.51xuediannao.com/tags.php?/jQuery%E5%BC%B9%E5%87%BA%E5%B1%82/">jQuery弹出层</a> | <a href="http://www.51xuediannao.com/js">JS代码</a>?|?<a href="http://www.51xuediannao.com">js特效代码大全</a>?|?<a href="http://www.51xuediannao.com">JS广告代码</a>?|?<a href="http://www.51xuediannao.com">下拉菜单代码</a> | <a href="http://www.51xuediannao.com/tags.php?/QQ客服/">QQ客服</a></p></div></body></html>
?
/* ----------------------------------------*//* ---------->>> global settings needed for thickbox <<<-----------------------*//* ----------------------------------------*/*{padding: 0; margin: 0;}/* ----------------------------------------*//* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*//* ----------------------------------------*/#TB_window {font: 12px Arial, Helvetica, sans-serif;color: #333333;}#TB_secondLine {font: 10px Arial, Helvetica, sans-serif;color:#666666;}#TB_window a:link {color: #666666;}#TB_window a:visited {color: #666666;}#TB_window a:hover {color: #000;}#TB_window a:active {color: #666666;}#TB_window a:focus{color: #666666;}/* ----------------------------------------*//* ---------->>> thickbox settings <<<-----------------------------------------*//* ----------------------------------------*/#TB_overlay {position: fixed;z-index:100;top: 0px;left: 0px;height:100%;width:100%;}.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}.TB_overlayBG {background-color:#000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}* html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}#TB_window {position: fixed;background: #ffffff;z-index: 102;color:#000000;display:none;border: 4px solid #525252;text-align:left;top:50%;left:50%;}* html #TB_window { /* ie6 hack */position: absolute;margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}#TB_window img#TB_Image {display:block;margin: 15px 0 0 15px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;border-top: 1px solid #666;border-left: 1px solid #666;}#TB_caption{height:25px;padding:7px 30px 10px 25px;float:left;}#TB_closeWindow{height:25px;padding:11px 25px 10px 0;float:right;}#TB_closeAjaxWindow{padding:7px 10px 5px 0;margin-bottom:1px;text-align:right;float:right;}#TB_ajaxWindowTitle{float:left;padding:7px 0 5px 10px;margin-bottom:1px;}#TB_title{background-color:#e8e8e8;height:27px;}#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em;}#TB_ajaxContent.TB_modal{padding:15px;}#TB_ajaxContent p{padding:5px 0px 5px 0px;}#TB_load{position: fixed;display:none;height:13px;width:208px;z-index:103;top: 50%;left: 50%;margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */}* html #TB_load { /* ie6 hack */position: absolute;margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}#TB_HideSelect{z-index:99;position:fixed;top: 0;left: 0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity: 0;opacity: 0;height:100%;width:100%;}* html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;_margin-bottom:1px;}?
thickbox还需要引用thickbox-compressed.js和jquery-1.4.3.min.js