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

时间: 2010-03-17 / 分类: 前端开发 / 浏览次数: 590 views / 0个评论发表评论

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

重写提取自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/"</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">'<div style="text-align:center;color:red;font-size:14px;">直接输出html，使用 <b>InnerHtml</b> 属性。</div>'</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">'<html><body><input id="a" type="text"/>请在文本框里输入一些值</body></html>'</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">"[url]http://demo.zving.com/&quot[/url];</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">'<html><body>窗口尺寸改为600*300</body></html>'</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">'<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>'</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月30日发布，更稳定更强大，敬请期待。</div> </div> </body> </html>

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

点击下载本源码

IETester