日期:2014-05-16  浏览次数:20460 次

请教一种弹出窗口的技术实现
想实现一种弹出窗口的效果
1、弹出窗口可以随意拖动
2、父窗口通过点击链接跳到其他页面不影响弹出窗口
3、美观,不能有IE标题栏、状态栏、边框、滚动条之类的东西
4、弹出的窗口载入的是一个页面。
5、弹出的窗口定义好初始大小。内嵌的页面可以缩放大小,要求弹出的窗口也能够跟着缩放,不能出现滚动条。
6、可以实现最小化及还原的功能。

------解决方案--------------------
你用jBox可以实现你要的功能
使用jQuery + jBox可以很方便实现你要的效果,给你个参考代码.
组件你自己去下吧:
http://www.aspstat.com/115
HTML code


<!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" />
<link href="javascript/Lib/jBox.css" rel="stylesheet" type="text/css"/>
<title>无标题文档</title>
<script src="javascript/jquery-1.2.1.js"></script>
<script src="javascript/jBox-1.1.js"></script>
<script>
    var openID = 1001;        
    $(document).ready(function () {
        
        $('a[@href=#]').click(function () {
        //jBox.open(openID,'iframe','open.html','窗口标题','width=200,height=250,center=true,minimizable=true,resize=true,draggable=true,model=true');
        jBox.open(openID,'iframe','open.html','窗口标题','width=200,height=250,center=true,minimizable=true,resize=true,draggable=true,model=false');

            //jBox.alert('对不起您没有填写完表单!', 300, 256);
        });
        
        
    });
</script>

</head>

<body>
<form>
<table width="80%" border="0" align="center">
  <tr>
    <td align="right">&nbsp;</td>
    <td><a href="#">
      <label>
      <input type="text" name="city" id="city" />
      </label>
      <input type="hidden" name="hiddenCity" id="hiddenCity" />
      选择城市</a>
      <br /></td>
  </tr>
</table>
</form>

</body>
</html>