超漂亮提取自ZCMS弹出框效果v2.0（兼容主流浏览器）

【强烈推荐】超漂亮提取自ZCMS弹出框效果v2.0（兼容主流浏览器）11月24日重写全部代码

重写提取自ZCMS的弹出框，功能更强大：

1. 代替window.open、alert、confirm；提供良好的用户体验；
2. 质感细腻，外观漂亮；
3. 兼容ie6/7/8、firefox2/3、Opera；弹出框在ie6下不会被select控件穿透；
4. 无外部css文件，引用Dialog.js即可使用；
5. 对iframe下的应用作了充分考虑，适合复杂的系统应用；
6. Dialog显示的内容：1、URL；2、隐藏的元素中的html内容；3、html内容；
7. 按ESC键可关闭弹出框；

效果图

部分示例如下（帖子长度所限，更多示例见下载包中的zDialogDemo.html）

<!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 open14()
{
var diag = new Dialog();
diag.OnLoad=function(){alert("页面载入完成")};
diag.URL = "http://demo.zving.com/";
diag.show();
}
function open16()
{
var diag = new Dialog();
diag.Title = "修改中窗体尺寸";
diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))";
diag.OKEvent = function(){
var doc=diag.innerFrame.contentWindow.document;
doc.open();
doc.write('<html><body>窗口尺寸改为600*300</body></html>') ;
doc.close();
diag.setSize(600,300);
diag.okButton.disabled=true;
};
diag.show();
diag.okButton.value="改变窗口大小"
}
function open17()
{
var diag = new Dialog();
diag.AutoClose=5;
diag.ShowCloseButton=false;
diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))";
diag.show();
}
function open19()
{
var diag = new Dialog();
diag.Title = "窗体内的按钮操作父Dialog";
diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))";
diag.show();
var doc=diag.innerFrame.contentWindow.document;
doc.open();
doc.write('<html><body><input type="button" id="a" value="修改父Dialog尺寸" onclick="parentDialog.setSize(function(min,max){return Math.round(min+(Math.random()*(max-min)))}(300,800))" /></body></html>') ;
doc.close();
}
</script>
</head>
<body>
<div id="content">
<h2>zDialog v2.0 - samples</h2>
<hr size="2" />
<div id="imgsloader" style="display:none;"></div>
<script>
var images=["icon_alert.gif","icon_dialog.gif","icon_query.gif","window.gif","dialog_cb.gif","dialog_closebtn.gif","dialog_closebtn_over.gif"];
var dlgimgs=isIE6?["dialog_ct.gif","dialog_lb.gif","dialog_lt.gif","dialog_mlm.gif","dialog_mrm.gif","dialog_rb.gif","dialog_rt.gif"]:["dialog_cb.png",
"dialog_ct.png","dialog_lb.png","dialog_lt.png","dialog_mlm.png","dialog_mrm.png","dialog_rb.png","dialog_rt.png"]
var images=images.concat(dlgimgs);
var imgsHtml=[];
for(var i=0;i<images.length;i++){
imgsHtml.push('<img src="'+IMAGESPATH+images[i]+'"/>')
}
$id("imgsloader").innerHTML=imgsHtml.join("");
</script>
<br />
<h3>1. 普通窗口 </h3>
<div class="item">
<input type="button" id="a" value="普通窗口" onclick="open1()"/>
<br/>
<pre>
<font color="#800000">Dialog.open({</font><font color="#008080">URL</font><font color="#800000">:</font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">});</font>
</pre>
</div>
<h3>2. 设定了高宽和标题的普通窗口 </h3>
<div class="item">
<input type="button" id="b" value="设定了高宽和标题的普通窗口" onclick="open2()"/>
<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.Width = 600;</font>
<font color="#800000">diag.Height = 300;</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.show();</font>
</pre>
</div>
<h3>3. 内容页为外部连接的窗口</h3>
<div class="item">
<input type="button" id="c" value="内容页为外部连接的窗口" onclick="open3()"/>
<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">"http://demo.zving.com/&quot;</font><font color="#800000">;</font>
<font color="#800000">diag.show();</font>
</pre>
</div>
<h3>4. 内容页为html代码的窗口</h3>
<div class="item">
<input type="button" id="d" value="内容页为html代码的窗口" onclick="open4()"/>
<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">"内容页为html代码的窗口"</font><font color="#800000">;</font>
<font color="#800000">diag.InnerHtml=</font><font color="#ff00ff">'&lt;div style="text-align:center;color:red;font-size:14px;"&gt;直接输出html，使用 &lt;b&gt;InnerHtml&lt;/b&gt; 属性。&lt;/div&gt;'</font>
<font color="#800000">diag.show();</font>
</pre>
</div>
<h3>5. 内容页为隐藏的元素的html内容</h3>
<div class="item">
<input type="button" id="e" value="内容页为隐藏的元素的html内容" onclick="open5()"/>
<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">"内容页为隐藏的元素的html"</font><font color="#800000">;</font>
<font color="#800000">diag.InvokeElementId=</font><font color="#ff00ff">"forlogin"</font>
<font color="#800000">diag.show();</font>
</pre>
<div id="forlogin">
<table width="100%" border="0" align="center" cellpadding="4" cellspacing="4" bordercolor="#666666">
<tr>
<td colspan="2" bgcolor="#eeeeee">用户登陆</td>
</tr>
<tr>
<td width="50" align="right">用户名</td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td align="right">密　码</td>
<td><input type="text" id="userpwd"  /></td>
</tr>
</table>
</div>
</div>
<h3>8. 返回值到调用页面</h3>
<div class="item">
<input type="button" id="h" value="返回值到调用页面" onclick="open8()"/>
<input type="text" id="getval" value="窗口的值返回到这里"/>
<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">$id</font><font color="#800000">(</font><font color="#ff00ff">'getval'</font><font color="#800000">).</font><font color="#008080">value </font><font color="#800000">= diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">.getElementById(</font><font color="#ff00ff">'a'</font><font color="#800000">).</font><font color="#008080">value</font><font color="#800000">;diag.close();};</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 id="a" type="text"/&gt;请在文本框里输入一些值&lt;/body&gt;&lt;/html&gt;'</font><font color="#800000">) ;</font>
<font color="#800000">doc.close();</font>
</pre>
</div>
<h3>9. 代替window.alert及window.confirm</h3>
<div class="item">
<input type="button" id="i" value="alert" onclick="open9()"/>
<input type="button" id="j"  value="confirm" onclick="open10();"/>
<br/>
<pre>
<font color="#800000">Dialog.alert(</font><font color="#ff00ff">"提示：你点击了一个按钮"</font><font color="#800000">);</font>
<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">"<a href="http://demo.zving.com/&quot" target="_blank">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.1版已经在11月11日发布了，更稳定更强大，敬请期待。</div>
</div>
</body>
</html>

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

因为图片在我的blog服务器上，第一次打开会比较慢，请耐心等候。

>>点此打包下载<<，记得给我顶一下帖啊。

posted @ 2009-11-28 10:44 邓武杰阅读(1605) 评论(3) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

邓武杰

超漂亮提取自ZCMS弹出框效果v2.0（兼容主流浏览器）

公告