.net扫盲-网页对话框应用

最新推荐文章于 2023-01-15 09:07:29 发布

原创最新推荐文章于 2023-01-15 09:07:29 发布 · 991 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#对话框 #弹出框 #序列化 #js数组

菜鸟程序设计专栏收录该内容

53 篇文章

订阅专栏

为提升用户体验，在B/S项目中使用对话框减少页面负担。介绍如何运用window.showModalDialog函数实现弹出框，并展示主页与子页的示例代码。

在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>

这个returnValue除了可以是布尔值,整型值等以外还可以是个js数组，用来传递大量数据。在.net 平台中，js数组是常用的传送对象，通过序列化，就可以让两个页面之间方便的传送数据了。