`

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 class="popup">
				<div class="popup-header">
					<h2>Now an ajax example</h2>
					<a href="javascript:;" onclick="$.closePopupLayer('myStaticPopup')" title="Close" class="close-link">Close</a>
					<br clear="all" />
				</div>
				<div class="popup-body">
					<code>
						<pre>
$.openPopupLayer({
	name: "mySecondPopup",
	width: 300,
	url: "ajax_example.html"
});
						</pre>
					</code>
	
					<p><a href="javascript:;" 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 class="popup">
	<div class="popup-header">
		<h2>It works!</h2>
		<a href="javascript:;" onclick="$.closePopupLayer('mySecondPopup')" title="Close" class="close-link">Close</a>
		<br clear="both" />
	</div>
	<div class="popup-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula nisl, mattis ullamcorper dolor.</p>
		<form>
			<fieldset>
				<legend>My form</legend>
				
				<label>Field 1</label>
				<input type="text" />
				
				<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="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="点击弹出隐藏层" class="thickbox" type="button" value="点击弹出隐藏层" />   
<a href="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="点击弹出隐藏层" class="thickbox" 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

分享到：
| http post 发送xml数据
评论
发表评论

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

相关推荐

    弹出层jquery.jmpopups

    标题中的“弹出层jquery.jmpopups”指的是一个基于jQuery的弹出窗口插件，主要用于在网页上创建各种类型的弹出层，如提示框、对话框或模态窗口。这个插件通常可以帮助开发者轻松地实现动态显示和隐藏的内容区域，以...

    jquery jmpopups 弹出新窗口，可以弹多个

    《jQuery jmpopups插件：实现弹出新窗口与多窗口管理》 在网页开发中，弹出新窗口的功能常用于展示详情、显示警告或提供交互体验，jQuery jmpopups是一个方便的工具，专为创建可自定义的新窗口而设计。这个插件允许...

    jmpopups获取input元素值

    标题“jmpopups获取input元素值”涉及到的是一个JavaScript库或者功能，可能是一个自定义的弹窗插件，用于从用户界面中获取`input`元素的值。在Web开发中，`input`元素通常用于创建表单，允许用户输入数据。获取这些...

    23个Javascript弹出窗口特效整理

    12. jmpopups：这是一个可同时打开多个模式对话框的jQuery插件。它的内容可以从当前页面中获取，也可以利用Ajax获取。jmpopups兼容大部分浏览器。 13. dhtmlxWindows：这是一个JavaScript对话框Window控件。它支持...

    基于jquery的ajax对话框

    总的来说，"基于jQuery的ajax对话框"是一个结合了jQuery、Ajax和对话框插件的网页组件，它允许用户在不离开当前页面的情况下加载和查看新的内容，提高了网页的交互性和用户体验。开发者可以通过定制各种参数和回调...

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