js模态对话框showModalDialog与非模态对话框showModelessDialog
在js中要用到弹出框是很常见的事，一般我们只是弹出个警告，提示，用alert就可以了；
如果涉及到输入值，可能要用到confirm，prompt。
但是这还不够，如果弹出的页面需要是一个定制的页面，即弹出y一个html，那怎么办呢？
一般，大家很快想到window.open，是吧？
但是这个函数有个问题，我想让弹出的页面是一个新的窗口，悬浮在原先的页面上。
这个函数是做不到的，现在的浏览器很多页面时想选项卡一样打开的，用这个函数打开的页面会和其他
选项卡并列打开，而并不是你想要的打开一个新的浏览器窗口。
有人说，只要设置浏览器打开页面方式不要在tab选项卡打开就可以了，这也是一个办法，
但是你怎么跟客户解释呢？
貌似实现哪种想要的效果只能换另一种方式了，就是弹出层。
弹出层的原理很简单，就是事先在页面写一个隐藏的div，当弹出时，让它显示即可。
至于让它悬浮在页面上，很容易做到，控制css就可以了。
很多这样的js框架也是这个原理，比如jquery-ui。
你甚至不用自己写代码，到网上找找就能找到很漂亮可用的弹出层代码。
貌似这是最完美的解决办法了，其实这样的代码是有问题的。
这样的弹出层是基于一个页面的，因为你先写好的隐藏div就放在某个页面，
当这个页面又被放到其他frame中去的时候，那弹出的div其实还在原先的页面，而没有悬浮在
frame的外面，效果就是你看到的弹出框悬浮在嵌入的frame里面，这样你就必须保证弹出的div大小不能超过
frame的大小，不然就卡在里面了，而且即使div大小没有超过frame，div的移动范围也没法移出frame边框。
这样的效果可以说就是一个大bug！页面的bug是很严重的，因为客户直接可以看到。
所以这种方式是有局限性的，除非你的页面没有用到frame，这个页面就是一个html。
或者你的某个页面足够大，不用考虑会被卡在里面。
现在我想说另外一种办法，就是ie有模态对话框showModalDialog与非模态对话框showModelessDialog
（注：方法与jquery无关，弹出的子页面有用到了jquery的方法，所以就引入了jquery，你完全可以不引入）
父页面：
dialog.html
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
function openwin() {
window.open ("slideToggle2.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
}
function openwin2() {
window.showModalDialog("slideToggle2.html");
}
function openwin3() {
window.showModelessDialog("slideToggle2.html");
}
function openwin4() {
window.showModalDialog("slideToggle.html","param4");
}
function openwin5() {
var arr=new Array('p51','p52','p53');
window.showModelessDialog("slideToggle.html",arr);
}
function openwin6() {
window.showModalDialog("slideToggle.html","param4",
"dialogHeight:500px;dialogWidth:500px;dialogLeft:50px;dialogTop:50px;status:no;resizable:yes;scroll:no;");
}
function openwin7() {
var arr=new Array('p71','p72','p73');
window.showModelessDialog("slideToggle.html",arr,"dialogHeight:500px;dialogWidth:500px;center:yes;status:yes;resizable:no;scroll:yes;");
}
function openwin8() { // showModelessDialog showModalDialog
var parentParam=document.getElementById("parentParam").value;
var returnValue8=window.showModalDialog("slideToggle.html",parentParam,
"dialogHeight:500px;dialogWidth:500px;dialogLeft:50px;dialogTop:50px;status:no;resizable:yes;scroll:no;");
//显示参数
document.getElementById("parentttt").innerText="第8个按钮弹出的对话框返回参数是：\n"+returnValue8;
}
var dialog9=null;
function openwin9() {
// var parentParam=document.getElementById("parentParam").value;
dialog9=window.showModelessDialog("modelless.html",window,"dialogHeight:500px;dialogWidth:500px;center:yes;status:yes;resizable:no;scroll:yes;");
}
function showReturnValue9(){
var d9=dialog9.document.getElementById("fanhui").value;
document.getElementById("parentttt").innerText="第9个按钮弹出的对话框返回参数是：\n"+d9;
}
function cleartt(){
document.getElementById("parentttt").innerText="";
}
</script>
</head>
<body>
<input type="button" value="1window.open" onclick="openwin()" /><br>
<br>2,3<br>
<input type="button" value="2window.showModalDialog" onclick="openwin2()" /><br>
<input type="button" value="3window.showModelessDialog" onclick="openwin3()" /><br>
<br>-----------------------------------------------------------------------------------------------------------------
<br>
带参数的例子4,5<br>
<input type="button" value="4window.showModalDialog带参数" onclick="openwin4()" /><br>
<input type="button" value="5window.showModelessDialog带参数" onclick="openwin5()" />
<br>
<br>
<br>
控制外观的例子6,7<br>
<input type="button" value="6window.showModalDialog带外观参数" onclick="openwin6()" /><br>
<input type="button" value="7window.showModelessDialog带外观参数" onclick="openwin7()" />
<br>
<br>
<hr><font color="gray">
下面是完整的父子传值例子</font>
<br>
父子页面互相传值的例子8,9<br>
请输入参数值：<input type="text" id="parentParam" value="" /><br>
<input type="button" value="8window.showModalDialog父子页面互相" onclick="openwin8()" /><br>
<font color="blue">
第8个对话框是模态对话框，它的返回值是打开的对话框返回的值。<br>
即window.returnValue，可以直接获得。
<br>
<br></font>
<input type="button" value="9window.showModelessDialog父子页面互相" onclick="openwin9()" /><br>
<font color="red">
第9个对话框因为是非模态对话框，它的返回值是打开的对话框对象。<br>
和模态对话框不一样，模态对话框的返回值是对话框页面的用户<br>
输入的返回值，因为是模态的，可以等待用户输入；<br>
而非模态是不一样的，它的传值方法不能像模态的一样直接得到返回参数<br>
它有另外的传值方式，我们可以把父窗口的window对象传过去，这样，<br>
我们在非模态对话框就可以操作父页面了，你想传的值看起来是传过去的,<br>
实际上是直接取的。如果要返回值给父窗口，也是直接赋给父页面的某个元素,<br>
看起来是传过去的,实际上是直接赋给的。<br></font>
<br>
<hr>
<br>
下面显示接收dialog的返回参数：<input type="button" value="清除" onclick="cleartt()" /><br>
<textarea cols="50" rows="5" id="parentttt"></textarea>
<br> <br>
</body>
</html>
<script type="text/javascript">
</script>
子页面1
slideToggle.html
<html>
<head>
<base target="_self" />
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle(3000,'linear',function(){
//alert("hh");
});
});
});
</script>
<style type="text/css">
div.panel
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5ffcc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com/" >百度</a><br>
<p class="flip">请点击这里</p>
<div class="panel">
<p>slideDown , slideUp, slideToggle ,animate 可以实现类似的效果</p>
<p>控制好方向，速度用不同的方法可实现相同效果。</p>
</div>
<br><br>
下面显示从父页面接收的参数：<br>
<textarea cols="50" rows="5" id="ttt"></textarea>
<br> <br>
<input type="button" value="关闭此对话框" onclick="closeDialog()" /><br>
<br>
请输入值，此值返回给父页面 <br>
<input type="text" id="fanhui" value="" /><br>
<input type="button" value="向打开此对话框的父页面传值并关闭" onclick="reback()" /><br>
</body>
</html>
<script type="text/javascript">
var a = window.dialogArguments;
document.getElementById("ttt").innerText=a;
function closeDialog(){
window.close();
}
function reback(){
var fanhui=document.getElementById("fanhui").value;
if(fanhui==null||fanhui==''){
var arr=new Array("dialog_param_1","dialog_param_2,dialog_param_3");
window.returnValue = "haha";
}else{
window.returnValue = fanhui;
}
window.close();
}
</script>
子页面2
slideToggle2.html
<html>
<head>
<base target="_self" />
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle(3000,'linear',function(){
//alert("hh");
});
});
});
</script>
<style type="text/css">
div.panel
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5ffcc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com/" >百度</a><br>
<p class="flip">请点击这里</p>
<div class="panel">
<p>slideDown , slideUp, slideToggle ,animate 可以实现类似的效果</p>
<p>控制好方向，速度用不同的方法可实现相同效果。</p>
</div>
</body>
</html>
<script type="text/javascript">
</script>
子页面3
modelless.html
<html>
<head>
<base target="_self" />
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle(3000,'linear',function(){
//alert("hh");
});
});
});
</script>
<style type="text/css">
div.panel
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5ffcc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com/" >百度</a><br>
<p class="flip">请点击这里</p>
<div class="panel">
<p>slideDown , slideUp, slideToggle ,animate 可以实现类似的效果</p>
<p>控制好方向，速度用不同的方法可实现相同效果。</p>
</div>
<br><br>
下面显示从父页面接收的参数：<br>
<textarea cols="50" rows="5" id="ttt"></textarea>
<br> <br>
<input type="button" value="关闭此对话框" onclick="closeDialog()" /><br>
<br>
请输入值，此值返回给父页面 <br>
<input type="text" id="fanhui" value="" /><br>
<input type="button" value="向打开此对话框的父页面传值并关闭" onclick="reback()" /><br>
</body>
</html>
<script type="text/javascript">
//非模态对话框接受参数
var parentWindow = window.dialogArguments;
var a2=parentWindow.document.getElementById("parentParam").value;
document.getElementById("ttt").innerText=a2;
function closeDialog(){
window.close();
}
function reback(){
//非模态对话框返回给父窗口参数
//显示参数
var fanhui=document.getElementById("fanhui").value;
parentWindow.document.getElementById("parentttt").innerText="第9个按钮弹出的对话框返回参数是：\n"+fanhui;
window.close();
}
</script>
此方法只适用于ie