在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" οnclick="openwin()" /><br>
<br>2,3<br>
<input type="button" value="2window.showModalDialog" οnclick="openwin2()" /><br>
<input type="button" value="3window.showModelessDialog" οnclick="openwin3()" /><br>
<br>-----------------------------------------------------------------------------------------------------------------
<br>
带参数的例子4,5<br>
<input type="button" value="4window.showModalDialog带参数" οnclick="openwin4()" /><br>
<input type="button" value="5window.showModelessDialog带参数" οnclick="openwin5()" />
<br>
<br>
<br>
控制外观的例子6,7<br>
<input type="button" value="6window.showModalDialog带外观参数" οnclick="openwin6()" /><br>
<input type="button" value="7window.showModelessDialog带外观参数" οnclick="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父子页面互相" οnclick="openwin8()" /><br>
<font color="blue">
第8个对话框是模态对话框,它的返回值是打开的对话框返回的值。<br>
即window.returnValue,可以直接获得。
<br>
<br></font>
<input type="button" value="9window.showModelessDialog父子页面互相" οnclick="openwin9()" /><br>
<font color="red">
第9个对话框因为是非模态对话框,它的返回值是打开的对话框对象。<br>
和模态对话框不一样,模态对话框的返回值是对话框页面的用户<br>
输入的返回值,因为是模态的,可以等待用户输入;<br>
而非模态是不一样的,它的传值方法不能像模态的一样直接得到返回参数<br>
它有另外的传值方式,我们可以把父窗口的window对象传过去,这样,<br>
我们在非模态对话框就可以操作父页面了,你想传的值看起来是传过去的,<br>
实际上是直接取的。如果要返回值给父窗口,也是直接赋给父页面的某个元素,<br>
看起来是传过去的,实际上是直接赋给的。<br></font>
<br>
<hr>
<br>
下面显示接收dialog的返回参数:<input type="button" value="清除" οnclick="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="关闭此对话框" οnclick="closeDialog()" /><br>
<br>
请输入值,此值返回给父页面 <br>
<input type="text" id="fanhui" value="" /><br>
<input type="button" value="向打开此对话框的父页面传值并关闭" οnclick="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="关闭此对话框" οnclick="closeDialog()" /><br>
<br>
请输入值,此值返回给父页面 <br>
<input type="text" id="fanhui" value="" /><br>
<input type="button" value="向打开此对话框的父页面传值并关闭" οnclick="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