最近在看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>
这样只要直接执行就可以看到效果了。
时间： 2024-11-02 23:28:07