最近在看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>
這樣只要直接執行就可以看到效果了。