<!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=gb2312"> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3672694-9']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?fa98b91e638fc607d0335693fb173e7f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="http://cbjs.baidu.com/js/s.js"></script> <style type="text/css"> body{position:relative;margin:0;padding:55px 0 0 0;} #demo_menu{position:absolute;top:0;left:0;width:100%;height:50px;line-height:50px;background:url(/statics/images/my/menu_bg.png) repeat-x;z-index:800;font-size:14px;text-align:center;color:#999;line-height:180%;border-bottom:1px solid #8A961C;} #demo_menu .top_menu{width:1080px;margin:0 auto;color:#000;font-size:12px;overflow:hidden;z-index:1000;} #demo_menu .top_menu strong{width:195px;display:block;height:50px;float:left;background:url(/statics/images/my/logo.png) no-repeat 0 8px;} #demo_menu .top_left{float:left;width:550px;height:50px;line-height:50px;z-index:9999;overflow:hidden;} #demo_menu .top_left ul{width:550px;float:right;overflow:hidden;list-style: none;margin:0;padding:0;} #demo_menu .top_left li{float:left;margin:0 15px 0 0;padding:0;text-align:center;} #demo_menu .top_left li a,#demo_menu .top_left li a:visited{font-size:14px;font-weight:bold;color:#333;text-decoration:none;width:60px;display:block;height:50px;line-height:50px;} #demo_menu .top_left li a:hover,#demo_menu .top_left li a:hover span{cursor:pointer;color:#fff;text-decoration:none;} #demo_menu .top_left a,#demo_menu .top_left a:visited{font-size:12px;white-space:nowrap;color:#fff;font-family:"宋体", "Times New Roman", Times, serif;line-height:140%;} #demo_menu .top_left a:hover{color:#000;font-family:"宋体", "Times New Roman", Times, serif;} #demo_menu .top_right{float:right;width:320px;padding:8px 0 0 0;z-index:1000;} #bdshare{margin:-5px 0 0 0;} </style><title>可拖拽移动漂亮的zDialog弹出层代码_酷站代码 www.5icool.org</title> <style> body { background: #ffffff; color: #444; font-size:12px;} a { color: #07c; text-decoration: none; border: 0; background-color: transparent; } div, q, iframe, form, h5 { margin: 0; padding: 0; } img, fieldset { border: none 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, code { 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 h2 { font-size:20px; color:#069; padding-top:8px; margin-bottom:8px; } #content h3 { margin:8px 0; font-size:14px; COLOR:#693; } #content h4 { margin:8px 0; font-size:16px; COLOR:#690; } #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; } .infobar { background:#fff9e3; border:1px solid #fadc80; color:#743e04; } .buttonStyle{width:64px;height:22px;line-height:22px;color:#369;text-align:center;background:url(images/buticon.gif) no-repeat left top;border:0;font-size:12px;} .buttonStyle:hover{background:url(images/buticon.gif) no-repeat left -23px;} </style> <script type="text/javascript" src="zDrag.js"></script> <script type="text/javascript" src="zDialog.js"></script> <script type="text/javascript"> function open1() { Dialog.open({URL:"test.html"}); } function open2() { var diag = new Dialog(); diag.Width = 400; diag.Height = 180; diag.Title = "设定了高宽和标题的普通窗口"; diag.URL = "test.html"; diag.show(); } function open3() { var diag = new Dialog(); diag.Width = 900; diag.Height = 400; diag.Title = "内容页为外部连接的窗口"; diag.URL = "test.html"; 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||Dialog.alert("用户名不能为空");topWin.$id("userpwd").value||Dialog.alert("密码不能为空")};//点击确定后调用的方法 diag.show(); } function open6() { var diag = new Dialog(); diag.Modal = false; diag.Left = 400; diag.Title = "弹出没有遮罩层的窗口"; diag.URL = "test.html"; diag.show(); } function closdlg() { Dialog.close(); } function open7() { var diag = new Dialog(); diag.Width = 200; diag.Height = 100; diag.Modal = false; diag.Title = "在指定位置弹出窗口"; diag.Top="100%"; diag.Left="100%"; diag.URL = "test.html"; diag.show(); } function open8() { var diag = new Dialog(); diag.Title = "返回值到调用页面"; diag.URL = "test.html"; 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 open11() { var diag = new Dialog(); diag.Title = "创建其它按钮"; diag.URL = "test.html"; diag.show(); diag.addButton("next","下一步",function(){ var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body>进入了下一步</body></html>') ; doc.close(); diag.removeButton(this); }) } function open12() { var diag = new Dialog(); diag.Title = "带有说明栏的新窗口"; diag.Width = 900; diag.Height = 400; diag.URL = "test.html"; diag.MessageTitle = "泽元网站内容管理系统"; diag.Message = "泽元网站内容管理系统是一个基于J2EE及AJAX技术的企业级网站内容管理系统"; diag.show(); } function open13() { var diag = new Dialog(); diag.URL = "test.html"; diag.show(); } function open14() { var diag = new Dialog(); diag.OnLoad=function(){alert("页面载入完成")}; diag.URL = "test.html"; diag.show(); } function open15() { var diag = new Dialog(); diag.Title = "点击取消或关闭按钮时执行方法"; diag.ShowButtonRow=true; diag.CancelEvent=function(){alert("点击取消或关闭按钮时执行方法");diag.close();}; diag.URL = "test.html"; 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(val) { var diag = new Dialog(); diag.AutoClose=5; diag.ShowCloseButton=false; diag.URL = "javascript:void(document.write(\'这是弹出窗口中的内容\'))"; diag.show(); } function open18() { var diag = new Dialog(); diag.Title="设置确定按钮及取消按钮的属性"; diag.ShowButtonRow=true; diag.URL = "javascript:void(document.write('确定改为OK，取消改为Cancel'))"; diag.show(); diag.okButton.value=" OK "; diag.cancelButton.value="Cancel"; } function open19() { var diag = new Dialog(); diag.Title = "窗体内的按钮操作父Dialog"; diag.URL = "test.html"; diag.CancelEvent=function(){alert("我要关闭了");diag.close();}; diag.show(); var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body><input type="button" id="a" value="修改父Dialog尺寸" οnclick="parentDialog.setSize(function(min,max){return Math.round(min+(Math.random()*(max-min)))}(300,800))" /> <input type="button" id="b" value="关闭父窗口" οnclick="parentDialog.close()" /> <input type="button" id="b" value="点击窗口取消按钮" οnclick="parentDialog.cancelButton.onclick()" /></body></html>') ; doc.close(); } function test(){ var diag = new Dialog(); diag.OKEvent=function(){ Dialog.alert("提交成功",function(){diag.close()}) }; diag.show(); } </script> </head> <body> <div id="content"> <h2>zDialog v2.0 - samples</h2> <hr size="2" /> <br /> <div style="border:1px dashed #ccc;padding:20px;"> <h4>弹出框：</h4> <ol> <li>代替window.open、window.alert、window.confirm；提供良好的用户体验；</li> <li>水晶质感，设计细腻，外观漂亮；</li> <li>兼容ie6/7/8、firefox2/3、Opera；弹出框在ie6下不会被select控件穿透；</li> <li>无外部css文件，引用Dialog.js即可使用；</li> <li>对iframe下的应用作了充分考虑，适合复杂的系统应用；</li> <li>Dialog显示的内容（三种）：1、指向一个URL的iframe窗口；2、页面内隐藏的元素中的html内容；3、直接输出一段html内容；</li> <li>按ESC键可关闭弹出框；</li> </ol> </div> <br /> <div style="width:728px;margin:0 auto;"><script type="text/javascript"><!-- google_ad_client = "pub-0516327981201276"; /* 728x90, 酷代码demo页创建于 09-11-26 */ google_ad_slot = "2082023026"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <div style="border:1px dashed #ccc;padding:20px;"> <h4>主调函数参数说明：</h4> <span style="color:rgb(0, 0, 255); ">Dialog.open({ID,Title,URL,InnerHtml,InvokeElementId,Width,Height,Top,Left,Drag,OKEvent,ShowButtonRow,MessageTitle,Message,AutoClose,OnLoad})</span><br> <ul> <li><span style="color:rgb(255, 0, 0); ">ID</span>：窗口id号，可省略。每个窗口的id必须是唯一的不能重复。</li> <li><span style="color:rgb(255, 0, 0); ">Title</span>：窗口标题。如不写此项默认值为""。</li> <li><span style="color:rgb(255, 0, 0); ">URL</span>： 窗口内容页地址，或使用相对路径或绝对路径，注意如果使用<a href="#;">http://www.5icool.org</a>形式的绝对地址，则http://不能省略。</li> <li><span style="color:rgb(255, 0, 0); ">InnerHtml</span>： 窗口内容html代码，用于直接输出html内容，注意不要让生成的内容因为不适当的宽度或定位方式而破坏了Dialog的外观。</li> <li><span style="color:rgb(255, 0, 0); ">InvokeElementId</span>： 本页面内隐藏的元素的id，用于显示页面内隐藏的元素中的html内容，注意不要让内容因为不适当的宽度或定位方式而破坏了Dialog的外观。</li> <li><span style="color:rgb(255, 0, 0); ">Width</span>：窗口宽度（dialog内容区宽度），值为数值型，默认值为窗口可见宽的40%。</li> <li><span style="color:rgb(255, 0, 0); ">Height</span>：窗口高度（dialog内容区高度），值为数值型，默认值为窗口可见宽的20%。</li> <li><span style="color:rgb(255, 0, 0); ">Left</span>：窗口距浏览器左边距离，值为数值型或字符串型（当使用百分比时为字符串型），如Left:"0%",Top:"0%"为左上，Left:"50%",Top:"50%"为居中，Left:"100%",Top:"100%"为右下。</li> <li><span style="color:rgb(255, 0, 0); ">Top</span>：窗口距浏览器顶端距离，值为数值型或字符串型（百分比）。</li> <li><span style="color:rgb(255, 0, 0); ">Drag</span>：是否允许拖动窗口，值为布尔型(true|false)，默认值为true，注意需要页面引用了Drag.js。</li> <li><span style="color:rgb(255, 0, 0); ">OKEvent</span>：点击确定按钮后执行的函数。</li> <li><span style="color:rgb(255, 0, 0); ">CancelEvent</span>：点击取消按钮或点击关闭按钮后执行的函数，默认为关闭本Dialog。</li> <li><span style="color:rgb(255, 0, 0); ">ShowButtonRow</span>：是否不显示按钮栏，值为布尔型(true|false)，默认值为false，当定义了OKEvent或调用了addButton时自动设为true。</li> <li><span style="color:rgb(255, 0, 0); ">MessageTitle,Message</span>：自定义的窗口说明栏中的小标题和说明。</li> <li><span style="color:rgb(255, 0, 0); ">ShowMessageRow</span>：是否显示窗口说明栏，值为布尔型(true|false)，默认值为false，当定义了MessageTitle或Message时自动设为true。</li> <li><span style="color:rgb(255, 0, 0); ">AutoClose</span>：是否自行关闭，值为数值型，默认值为false。</li> <li><span style="color:rgb(255, 0, 0); ">OnLoad</span>：窗口内容载入完成后执行的程序，值为函数型。</li> </ul> </div> <br /> <h3>1. 普通窗口 </h3> <div class="item"> <input type="button" id="a" value="普通窗口" onClick="open1()"/><select><option>在IE6下能够挡住select控件</option></select> <br/> <pre> <font color="#800000">Dialog.open({</font><font color="#008080">URL</font><font color="#800000">:</font><font color="#ff00ff">"test.html"</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">"test.html"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> </div> <div style="width:728px;margin:0 auto;"><script type="text/javascript"><!-- google_ad_client = "pub-0516327981201276"; /* 728x90, 酷代码demo页创建于 09-11-26 */ google_ad_slot = "2082023026"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></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.Width = 900;</font> <font color="#800000">diag.Height = 400;</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://www.5icool.org/"</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.Width = 300;</font> <font color="#800000">diag.Height = 100;</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.OKEvent = </font><font color="#0000ff">function</font><font color="#800000">(){diag.close();};</font><font color="#008000">//点击确定后调用的方法</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.Width = 300;</font> <font color="#800000">diag.Height = 150;</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.OKEvent = </font><font color="#0000ff">function</font><font color="#800000">(){</font><font color="#0000ff">$id</font><font color="#800000">(</font><font color="#ff00ff">"username"</font><font color="#800000">).</font><font color="#008080">value</font><font color="#800000">||Dialog.alert(</font><font color="#ff00ff">"用户名不能为空"</font><font color="#800000">);</font><font color="#0000ff">$id</font><font color="#800000">(</font><font color="#ff00ff">"userpwd"</font><font color="#800000">).</font><font color="#008080">value</font><font color="#800000">||Dialog.alert(</font><font color="#ff00ff">"密码不能为空"</font><font color="#800000">)};</font><font color="#008000">//点击确定后调用的方法</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>6. 在调用页面按钮关闭弹出窗口</h3> <div class="item"> <input type="button" id="f" value="弹出没有遮罩层的窗口" onClick="open6()"/> <input type="button" value="关闭弹出窗口" onClick="closdlg();"/> <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.Modal = </font><font color="#0000ff">false</font><font color="#800000">;</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">"test.html"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> <span>关闭窗口按钮代码：<font color="#800000"> Dialog.close();</font></span> </div> <h3>7. 在指定位置弹出窗口</h3> <div class="item"> <input type="button" id="g" value="在指定位置弹出窗口" onClick="open7()"/> <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 = 200;</font> <font color="#800000">diag.Height = 100;</font> <font color="#800000">diag.Modal = </font><font color="#0000ff">false</font><font color="#800000">;</font> <font color="#800000">diag.Title = </font><font color="#ff00ff">"在指定位置弹出窗口"</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#800080">Top</font><font color="#800000">=</font><font color="#ff00ff">"100%"</font><font color="#800000">;</font> <font color="#800000">diag.Left=</font><font color="#ff00ff">"100%"</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"test.html"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> <span>注：可使用数字或百分比（带百分比符号的字符串）来定义相对于当前窗口的位置，换算效果同css中用百分比定义背景图位置，如Left:"0%",Top:"0%"为左上，Left:"50%",Top:"50%"为居中，Left:"100%",Top:"100%"为右下。</span> </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">"test.html"</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> <span>注：Dialog.alert(msg, func, w, h)第二个参数为点击“确定”按钮后执行的函数。<br> Dialog.confirm(msg, funcOK, funcCal, w, h)第二个参数为点击“确定”按钮后执行的函数，第三个参数为点击“取消”按钮后执行的函数。</span> </div> <h3>10. 创建其它按钮</h3> <div class="item"> <input type="button" id="j" value="创建其它按钮" onClick="open11()"/> <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">"test.html"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> <font color="#800000">diag.addButton(</font><font color="#ff00ff">"next"</font><font color="#800000">,</font><font color="#ff00ff">"下一步"</font><font color="#800000">,</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>进入了下一步</body></html>'</font><font color="#800000">) ;</font> <font color="#800000">doc.close();</font> <font color="#800000">})</font> </pre> </div> <h3>11. 带有内容说明栏的新窗口</h3> <div class="item"> <input type="button" id="k" value="弹出带说明栏的新窗口" onClick="open12()"/> <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.Width = 900;</font> <font color="#800000">diag.Height = 400;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"http://www.5icool.org/"</font><font color="#800000">;</font> <font color="#800000">diag.MessageTitle = </font><font color="#ff00ff">"泽元网站内容管理系统"</font><font color="#800000">;</font> <font color="#800000">diag.Message = </font><font color="#ff00ff">"泽元网站内容管理系统是一个基于J2EE及AJAX技术的企业级网站内容管理系统"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> </div> <h3>12. 显示窗体内容页面标题</h3> <div class="item"> <input type="button" id="m" value="显示窗体内容页面标题" onClick="open13()"/> <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.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"http://www.5icool.org/"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> <span>注：如果窗体内为iframe内容页，并且没有设置Title属性，并且引用页和当前页在同一个域内，则显示显示窗体内容页面标题。</span> </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">"http://www.5icool.org/"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> <span>注：如果窗体内为iframe内容页，要在载入完成后对内容页作操作，必须考虑访问权限，如引用页和当前页应在同一个域内。</span> </div> <h3>14. 点击取消及关闭时执行方法</h3> <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> <div class="item"> <input type="button" id="o" value=" 点击取消及关闭时执行方法 " onClick="open15()"/> <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.CancelEvent=</font><font color="#0000ff">function</font><font color="#800000">(){alert(</font><font color="#ff00ff">"点击取消或关闭按钮时执行方法"</font><font color="#800000">);diag.close();};</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"test.html"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> </div> <h3>15. 不允许拖拽</h3> <div class="item"> <input type="button" id="p" value="不允许拖拽" onClick="Dialog.open({Drag:false,URL:'test.html'})"/> <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.Drag=</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">"test.html"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> </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(1)"/> <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>18. 设置确定按钮及取消按钮的属性</h3> <div class="item"> <input type="button" id="s" value="设置确定按钮及取消按钮的属性" onClick="open18()"/> <br/> <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.ShowButtonRow=</font><font color="#0000ff">true</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"test.html"</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">" OK "</font><font color="#800000">;</font> <font color="#800000">diag.cancelButton.</font><font color="#008080">value</font><font color="#800000">=</font><font color="#ff00ff">"Cancel"</font><font color="#800000">;</font> </pre> <br/> </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">"test.html"</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尺寸" \ οnclick="parentDialog.setSize(function(min,max){return Math.round(min+(Math.random()*(max-min)))}(300,800))" \ /><input type="button" id="b" value="关闭父窗口" οnclick="parentDialog.close()" /></body></html>'</font><font color="#800000">) ;</font> <font color="#800000">doc.close();</font> </pre> </div></div> <p align="center"><a href="http://www.5icool.org/a/201204/576.html" target="_blank"><strong>可拖拽移动漂亮的JS弹出层代码</strong></a> <a href="http://www.5icool.org/a/201204/576.html" target="_blank">[源码下载][使用帮助]</a></p><div id="demo_menu"> <div class="top_menu"> <div class="top_right"> <!-- Baidu Button BEGIN --> <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"> <a class="bds_qzone"></a> <a class="bds_tsina"></a> <a class="bds_tqq"></a> <a class="bds_renren"></a> <a class="bds_t163"></a> <span class="bds_more"></span> <a class="shareCount"></a> </div> <!-- Baidu Button END --> </div> <strong></strong> <div class="top_left"> <ul> <li><a href="/">首 页</a></li> <li><a href="/wangyetexiao/">网页特效</a></li> <li><a href="/wangyezhizuo/">网页教程</a></li> <li><a href="/jianzhanziyuan/">建站资源</a></li> <li><a href="/kuzhan/">酷站欣赏</a></li> </ul> </div> </div> </div> <p align="center" style="font-size:12px;">代码整理：<a href="http://www.5icool.org/" target="_blank">酷站代码</a>，转载请注明出处。 本代码仅限于学习交流，请勿用于商业用途! </p> <!-- 广告位：底部728_90图片 --> <div align="center" style="margin:20px auto 0 auto;width:728px;z-index:9999;clear:both;"><script type="text/javascript">BAIDU_CLB_singleFillSlot("10305");</script></div> <!-- Baidu Button BEGIN --> <script type="text/javascript" id="bdshare_js" data="type=tools&uid=13844" ></script> <script type="text/javascript" id="bdshell_js"></script> <script type="text/javascript"> var bds_config = { 'bdTop':'3', 'review':'off', 'searchPic':'1', 'wbuid':'1752410062', 'snsKey':{'tsina':'3445908626'} } document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000); </script> <!-- Baidu Button END --> </body> </html>
05-26
1万+
1万+
04-01
125
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
