在B/S的项目中,越来越的功能的需要添加到页面上,但一个页面承载这么多功能,就会让页面的美观度、甚至体验友好度大打折扣.但如果将某些不是很必须的元素先隐藏起来,当用户点击后再将此元素以相应的形式出现,这样的设计可减少网页页面的体积,以让网页设计者很好的开展自己的想象,设计出更加人性化的用户UI界面。
如下图所示:
提示框:
警告框:
以上网页对话框,相信大家都不陌生,最常见的就是弹出登陆/注册框,像百度:
还有一些,例如修改录入等:
对话网页,其实也就是我们常说的弹出框,弹出页面也是能自定义的.看到这儿相信你已经发现,对话框的设计还有很大的潜力去发掘.下面介绍一下,实现方法.
主要用到javascript中window对象的用window.showModalDialog函数打开一个IE的模式窗口,然后利用window.returnValue 属性,作为返回值返回.
主页:
<span style="font-family:Microsoft YaHei;font-size:14px;"><pre name="code" class="html"><!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> <title>Main web</title> <script language="javascript"> function showmodal(){ var data = window.showModalDialog("child.html",null,"dialogWidth:350px;dialogHeight:350px;help:no;status:no"); alert(data); } </script> </head> <body> <input id=button1 type=button value=Button name=button1 onclick="showmodal();"> </body> </html> </span>
子页:
<span style="font-family:Microsoft YaHei;font-size:14px;"><!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> <title>Dialog web</title> <script language="javascript"> function trans(){ window.returnValue="data"; window.close(); } </script> </head> <body> <input id=button1 type=button value="返回数据" name=button1 onclick="trans();"> </body> </html> </span>
原文地址:http://blog.csdn.net/chenjinge7/article/details/43602065