js模态窗口

　　最近在看js，正好公司用的框架中用到了模态窗口，以前没有接触过，现在把模态窗口的用法先记下来。

常用的浏览器chrome，Firefox，ie11，这三种分别支持document.open()，window.showModalDialog()，window.showModalDialog()的方式。下面还是直接给出代码，比较直观：

motaichuangkou.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script>
		//全局变量
		var a = "wyl";
		window.b = a;
		//封装 模态窗口，
		function motai(html,parameter,size){
				//document.open(html,parameter,size);
				var d = 123;//主要是调试改网页的时候在此处设置断点用
				//此处做能力检测，进行兼容
				if(window.showModalDialog){
						console.log('showModalDialog 方式');
						window.showModalDialog(html,parameter,size);
				}else{
					console.log('open 方式');
					document.open(html,parameter,size);	
				}
			}
		window.onload = function(){
				var btn1 = document.getElementById('btn1');
				btn1.onclick = motai("test2.html",window.a,"dialogWidth:400px;dialogHeight:500px;");
			}
	</script>
    
</head>

<body>
	<input type="button" id="btn1" />
</body>
</html>

　　前面html中用到的test2.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script>
		alert("b:"+window.b);
	</script>
</head>

<body>
	<input type="text" />
</body>
</html>

　　这样只要直接执行就可以看到效果了。