超漂亮提取自ZCMS弹出框效果v2.0（兼容主流浏览器）11月27日修-WEB开发人员网络-XML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ZCMS弹出框效果（兼容主流浏览器）</title>
<style>
body { background: #fff; color: #444; }
a { color: #07c; text-decoration: none; }
body, div, q, h5 { margin: 0; padding: 0; }
body, td, textarea { word-break: break-all; word-wrap: break-word; line-height:1.6; }
body, input, textarea, select, button { margin: 0; font-size: 14px; font-family: Tahoma, SimSun, sans-serif; }
div, p, table, th, td { font-size:1em; font-family:inherit; line-height:inherit; }
h5 { font-size:12px; }
ol li,ul li{ margin-bottom:0.5em;}
pre{ font-family: "Courier New", Courier, monospace; word-wrap:break-word; line-height:1.4; font-size:12px;}
pre{background:#f6f6f6; border:#eee solid 1px; margin:1em 0.5em; padding:0.5em 1em;}
#content { padding-left:50px; padding-right:50px; }
#content h3 { margin:8px 0; font-size:14px; COLOR:#693; }
#content div.item { margin-top:10px; margin-bottom:10px; border:#eee solid 4px; padding:10px; }
hr { clear:both; margin:7px 0; +margin: 0;
border:0 none; font-size: 1px; line-height:1px; color: #069; background-color:#069; height: 1px; }
</style>
<script type="text/javascript" src="http://www.5-studio.com/wp-content/uploads/2009/11/zDrag.js"></script>
<script type="text/javascript" src="http://www.5-studio.com/wp-content/uploads/2009/11/zDialog.js"></script>
<script type="text/javascript">
function open1()
{
	Dialog.open({URL:"javascript:void(document.write('这是弹出窗口中的内容'))"});
}
function open2()
{
	var diag = new Dialog();
	diag.Width = 600;
	diag.Height = 300;
	diag.Title = "设定了高宽和标题的普通窗口";
	diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))";
	diag.show();
}
function open3()
{
	var diag = new Dialog();
	diag.Width = 900;
	diag.Height = 400;
	diag.Title = "内容页为外部连接的窗口";
	diag.URL = "http://demo.zving.com/";
	diag.show();
}
function open4()
{
	var diag = new Dialog();
	diag.Width = 300;
	diag.Height = 100;
	diag.Title = "内容页为html代码的窗口";
	diag.InnerHtml='<div style="text-align:center;color:red;font-size:14px;">直接输出html，使用 <b>InnerHtml</b> 属性。</div>'
	diag.OKEvent = function(){diag.close();};//点击确定后调用的方法
	diag.show();
}
function open5()
{
	var diag = new Dialog();
	diag.Width = 300;
	diag.Height = 150;
	diag.Title = "内容页为隐藏的元素的html";
	diag.InvokeElementId="forlogin"
	diag.OKEvent = function(){topWin.$id("username").value||alert("用户名不能为空");topWin.$id("userpwd").value||alert("密码不能为空")};//点击确定后调用的方法
	diag.show();
}
function open8()
{
	var diag = new Dialog();
	diag.Title = "返回值到调用页面";
	diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))";
	diag.OKEvent = function(){$id('getval').value = diag.innerFrame.contentWindow.document.getElementById('a').value;diag.close();};
	diag.show();
	var doc=diag.innerFrame.contentWindow.document;
	doc.open();
	doc.write('<html><body><input id="a" type="text"/>请在文本框里输入一些值</body></html>') ;
	doc.close();
}
function open9()
{
	Dialog.alert("提示：你点击了一个按钮");
}
function open10()
{
	Dialog.confirm('警告：您确认要XXOO吗？',function(){Dialog.alert("yeah，周末到了，正是好时候")});
}

function open17()
{
	var diag = new Dialog();
	diag.AutoClose=5;
	diag.ShowCloseButton=false;
	diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))";
	diag.show();
}

<font color="#800000">Dialog.confirm(</font><font color="#ff00ff">'警告：您确认要XXOO吗？'</font><font color="#800000">,</font><font color="#0000ff">function</font><font color="#800000">(){Dialog.alert(</font><font color="#ff00ff">"yeah，周末到了，正是好时候"</font><font color="#800000">)});</font>
</pre>
</div>
  <h3>13. 在弹窗的内容载入完成后，执行方法</h3>
  <div class="item">
    <input type="button" id="n" value="在弹窗载入完成后，执行方法" onclick="open14()"/>
    <br/>
<pre>
	<font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font>
	<font color="#800000">diag.OnLoad=</font><font color="#0000ff">function</font><font color="#800000">(){alert(</font><font color="#ff00ff">"页面载入完成"</font><font color="#800000">)};</font>
	<font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"[url]http://demo.zving.com/&quot</a>;</font><font color="#800000">;</font>
	<font color="#800000">diag.show();</font>
</pre>
<span>注：如果窗体内为iframe内容页，要在载入完成后对内容页作操作，必须考虑访问权限，如引用页和当前页应在同一个域内。</span> </div>
  <div id="hiddencontent" style="display:none;width:400px;height:100px;" class="infobar">
    <div style="text-align:right;padding-right:5px;border:0;height:10px;font-size:9px;color:#666;"><a href="javascript:lhgdialog.hidden('hiddencontent','');">X</a></div>
    <div style="padding:10px;">我是隐藏内容</div>
  </div>
  <h3>16. 动态改变窗口大小</h3>
  <div class="item">
    <input type="button" id="q" value="动态改变窗口大小" onclick="open16()"/>
    <br/>
<pre>
	<font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font>
	<font color="#800000">diag.Title = </font><font color="#ff00ff">"修改中窗体尺寸"</font><font color="#800000">;</font>
	<font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">;</font>
	<font color="#800000">diag.OKEvent = </font><font color="#0000ff">function</font><font color="#800000">(){</font>
		<font color="#0000ff">var </font><font color="#800000">doc=diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">;</font>
		<font color="#800000">doc.open();</font>
		<font color="#800000">doc.write(</font><font color="#ff00ff">'&lt;html&gt;&lt;body&gt;窗口尺寸改为600*300&lt;/body&gt;&lt;/html&gt;'</font><font color="#800000">) ;</font>
		<font color="#800000">doc.close();</font>
		<font color="#800000">diag.setSize(600,300);</font>
	<font color="#800000">};</font>
	<font color="#800000">diag.show();</font>
	<font color="#800000">diag.okButton.</font><font color="#008080">value</font><font color="#800000">=</font><font color="#ff00ff">"改变窗口大小"</font>
</pre>
</div>
  <h3>17. 弹出窗口自动关闭</h3>
  <div class="item">
    <input type="button" id="r" value="自动关闭" onclick="open17()"/>
    <br/>
<pre>
	<font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font>
	<font color="#800000">diag.AutoClose=5;</font>
	<font color="#800000">diag.ShowCloseButton=</font><font color="#0000ff">false</font><font color="#800000">;</font>
	<font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">;</font>
	<font color="#800000">diag.show();</font>
</pre>
<span>注：AutoClose为自动关闭时间，单位秒</span> </div>
  <h3>19. 窗体内的按钮操作父Dialog</h3>
  <div class="item">
    <input type="button" id="t" value="窗体内的按钮操作父Dialog" onclick="open19()"/>
    <br/>
<pre>
	<font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font>
	<font color="#800000">diag.Title = </font><font color="#ff00ff">"窗体内的按钮操作父Dialog"</font><font color="#800000">;</font>
	<font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">;</font>
	<font color="#800000">diag.show();</font>
	<font color="#0000ff">var </font><font color="#800000">doc=diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">;</font>
	<font color="#800000">doc.open();</font>
	<font color="#800000">doc.write(</font><font color="#ff00ff">'&lt;html&gt;&lt;body&gt;&lt;input type="button" id="a" value="修改父Dialog尺寸" \
    onclick="parentDialog.setSize(function(min,max){return Math.round(min+(Math.random()*(max-min)))}(300,800))" \
    /&gt;&lt;/body&gt;&lt;/html&gt;'</font><font color="#800000">) ;</font>
	<font color="#800000">doc.close();</font>
</pre>
</div>
  <div style="border:1px dashed #ccc;padding:20px;">最后作一下广告，<a href="http://www.zving.com/products/zcms/">ZCMS</a>1.2版将于12月12日发布，更稳定更强大，敬请期待。</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行