js模态对话框showModalDialog与非模态对话框showModelessDialog

现在的位置: 首页 > 综合 > 正文

RSS

js模态对话框showModalDialog与非模态对话框showModelessDialog

2013年08月15日 ⁄ 综合 ⁄ 共 8030字 ⁄ 字号小中大 ⁄ 评论关闭

在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

【上篇】2.8 [ Enterprise Library ] 度量仪可用
【下篇】Android用GSon处理Json数据

作者: chromatic

该日志由 chromatic 于11年前发表在综合分类下，最后更新于 2013年08月15日.
转载请注明: js模态对话框showModalDialog与非模态对话框showModelessDialog | 学步园 +复制链接

抱歉!评论已关闭.

学步园

js模态对话框showModalDialog与非模态对话框showModelessDialog

作者: chromatic

书签

最新文章New

本站推荐

返回首页