<!DOCTYPE HTML>
<html>
<head lang="zh">
<title>jQuery Dialog弹出层对话框插件演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="jquery,dialog,plugins,jquery plugins,弹出层,对话框" />
<meta name="description" content="jQuery插件dialog演示" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="home" href="http://www.caixw.com" />
<link rel="stylesheet" type="text/css" href="http://www.caixw.com/public/s/jquery/dialog/dialog.css" />
<link rel="stylesheet" type="text/css" href="http://www.caixw.com/public/s/prettify/prettify.css" />
<script type="text/javascript" src="http://www.caixw.com/public/s/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://www.caixw.com/public/s/jquery/dialog/dialog.js"></script>
<script type="text/javascript" src="http://www.caixw.com/public/s/prettify/prettify.js"></script>
<!--[if lte IE 8]><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- google analytics -->
<style type="text/css">
body{text-align:center;background:#ddd;font-size:90%;}
a{text-decoration:none;cursor:pointer;}
a:hover {text-decoration:underline;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.center{margin-left:auto;margin-right:auto;background:#fff;width:70%;border:1px solid gray;}
.header,.footer{background:#ddd;padding:20px;}
.ad-left{left:6px;top:100px;position:absolute;}
.ad-right{right:6px;top:100px;position:absolute;}
.content{text-align:left;padding:20px;}
.content .list{margin:20px;padding-bottom:20px;border-bottom:1px dotted gray;}
h5{margin:0px;}
pre{margin:5px 10px 10px 10px !important;padding:2px !important;word-wrap:break-word;}
pre{cursor:pointer;}
pre:hover {background:gray;}
#dialog1-overlay
{
background:blue;
opacity:0.8;
filter:alpha(opacity=80);
}
#dialog2 .content
{
width:250px;
height:80px;
background-image:url(http://www.caixw.com/public/uploads/demo/images/300x125.gif);
}
</style>
</head>
<body>
<div class="center">
<div class="header">
<h1>jQuery Dialog弹出层对话框插件演示</h1>
<span class="left">
<a href="http://www.caixw.com/public/s/jquery/dialog/dialog.js">下载JS文件</a>
|
<a href="http://www.caixw.com/public/s/jquery/dialog/dialog.css">下载CSS文件</a>
|
<a href="http://www.caixw.com/archives/22">返回相关文章</a>
</span>
<span class="right">最后更新：<time>2010-07-26</time></span>
<div class="clear"></div>
</div><!-- end header -->
<div class="content">
<div class="list">
<h3>基本操作</h3>
<h5>默认的</h5>
<pre class="prettyprint lang-js" onclick="new Dialog('这是一个默认对话框').show();">
new Dialog('这是一个默认对话框').show();
</pre>
<h5>非模态对话框</h5>
<pre class="prettyprint lang-js" onclick="new Dialog('非模态对话框，可以打开多个！',{modal:false}).show();">
new Dialog('非模态对话框，可以打开多个！',{modal:false}).show();
</pre>
<h5>自动关闭</h5>
<pre class="prettyprint lang-js" onclick="new Dialog('5秒后自动关闭',{time:5000}).show();">
new Dialog('5秒后自动关闭',{time:5000}).show();
</pre>
<h5>非fixed模式</h5>
<pre class="prettyprint lang-js" onclick="new Dialog('对话框不随滚动条移动',{fixed:false}).show();">
new Dialog('对话框不随滚动条移动',{fixed:false}).show();
</pre>
<h5>显示指定ID的内容</h5>
<pre id="content-type-id" class="prettyprint lang-js" onclick="new Dialog({type:'id',value:'content-type-id'}).show();">
// 将显示本标签内的内容。
new Dialog({type:'id',value:'content-type-id'}).show();
</pre>
<h5>加载一张图片</h5>
<pre class="prettyprint lang-js" onclick="new Dialog({type:'img',value:'http://www.caixw.com/public/uploads/demo/images/300x125.gif'}).show();">
new Dialog({type:'img',value:'http://www.caixw.com/public/uploads/demo/images/300x125.gif'}).show();
</pre>
<h5>加载一URL地址</h5>
<pre class="prettyprint lang-js" onclick="new Dialog({type:'url',value:'http://www.caixw.com/public/uploads/demo/jquery/dialog/test.html'}).show();">
new Dialog({type:'url',value:'http://www.caixw.com/public/uploads/demo/jquery/dialog/test.html'}).show();
</pre>
<h5>加载一URL到iframe</h5>
<pre class="prettyprint lang-js" onclick="new Dialog({type:'iframe',value:'http://www.caixw.com'}).show();">
new Dialog({type:'iframe',value:'http://www.caixw.com'}).show();
</pre>
</div><!-- end list -->
<div class="list">
<h3>自定义CSS</h3>
<h5>自定义背景遮盖层</h5>
<pre class="prettyprint lang-css">
#dialog1-overlay
{
background:blue;
opacity:0.8;
filter:alpha(opacity=80);
}
</pre>
<pre class="prettyprint lang-js" onclick="new Dialog('自定义背景遮盖层',{id:'dialog1'}).show();">
new Dialog('自定义背景遮盖层',{id:'dialog1'}).show();
</pre>
<h5>自定义内容部分背景</h5>
<pre class="prettyprint lang-css">
#dialog2 .content
{
width:250px;
height:80px;
background-image:url(http://www.caixw.com/public/uploads/demo/images/300x125.gif);
}
</pre>
<pre class="prettyprint lang-js" onclick="new Dialog('自定义内容部分背景',{id:'dialog2'}).show();">
new Dialog('自定义内容部分背景',{id:'dialog2'}).show();
</pre>
<!--h3></h3>
<pre class="prettyprint lang-js">
</pre-->
</div><!-- end list -->
<div class="list">
<h3>回调函数</h3>
<h5>show()函数</h5>
<pre class="prettyprint lang-js" onclick="new Dialog('show()回调函数',{afterShow:function(){alert('after show');},beforeShow:function(){alert('before show');return true;}}).show();">
new Dialog('show()回调函数'
{beforeShow:function(){alert('before show'),return true},afterShow:function(){alert('after show');}})
.show();
</pre>
<h5>hide()函数</h5>
<pre class="prettyprint lang-js">
dlg = new Dialog('hide()回调函数'
{beforeHide:function(){alert('before hide'),return true},afterHide:function(){alert('after hide');}})
.show();
dlg.hide();
</pre>
<button onclick="dlg = new Dialog('hide()回调函数',{afterHide:function(){alert('after hide');},beforeHide:function(){alert('before hide');return true;},modal:false});dlg.show();">显示</button> <button onclick="dlg.hide();">隐藏</button>
<br />
<br />
<h5>close()函数</h5>
<pre class="prettyprint lang-js" onclick="new Dialog('close()回调函数',{afterClose:function(){alert('after close');},beforeClose:function(){alert('before close');return true;}}).show();">
new Dialog('close()回调函数'
{beforeClose:function(){alert('before close'),return true},afterClose:function(){alert('after close');}})
.show();
</pre>
</div><!-- end list -->
</div><!-- end content -->
<div class="footer">
©2010 by <a rel="me" href="http://www.caixw.com">caixw.com</a>
|
<a href="http://www.caixw.com/archives/22">相关文章</a>
</div>
</div><!-- end center -->
<div class="ad-left">
</div><!-- end header -->
<div class="ad-right">
</div><!-- end footer -->
</body>
</html>
|
