`
feiliboos
  • 浏览: 664341 次
文章分类
社区版块
存档分类
最新评论

DIV模拟弹出窗口(支持拖动)

 
阅读更多

现在高版本浏览器都可以设置对弹出窗口进行拦截,所有的浏览器工具条等都对弹出窗口进行拦截,但是有时候我们确实需要弹出窗口。针对这些我们做了一个简单的效果,没有做太多的测试,只是示意一下!

<html>
<head>
<title>div弹出窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
#drag{
width:250px;
height:20px;
border:1px solid #333;
position:absolute;
top:17px;
left:187px;
z-index:9999;
text-align:center;
overflow: visible;
visibility: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'),document.getElementById('lstd'));
};
function drag(o,ot){
ot.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(ot.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx;
o.style.top=ty;
};

d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->

function showwin()
{
//visibility: visible;
if(document.getElementById('drag').style.visibility!="visible")
{
document.getElementById('drag').style.visibility="visible";
document.getElementById('drag').style.left=((document.body.clientWidth-400)/2);
document.getElementById('drag').style.top=50;
}

}
function closewin()
{
//visibility: visible;
if(document.getElementById('drag').style.visibility!="hidden")
{
document.getElementById('drag').style.visibility="hidden";
document.getElementById('drag').style.left=((document.body.clientWidth-400)/2);
document.getElementById('drag').style.top=100;
}
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="768" border="0" cellspacing="0" cellpadding="0" align="center">

<tr>
<td width="770" height="25" align="center">
<div id="drag">
<table width="250" height="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" background="top_bg.gif"><table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="98%" nowrap id="lstd" style="cursor:move; font-size:14px;"><strong><!--标题开始-->DIV窗口测试<!--标题结束--></strong></td>
<td align="right" onClick="closewin()" style="cursor:hand;" nowrap title="关闭">[X]</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF" style=" font-size:12px;"><!--内容开始--><br>
&nbsp;这里可以放窗口内容<!--内容结束--></td>
</tr>
</table></div>
</td>
</tr>

</table>

</body>
</html>
<script language="javascript">
showwin();
</script>

示例文件:下载
由于上传文件的功能出错,所以把文件当作图片上传,下载后只需要把文件名中的".jpg"去掉就可以打开了

分享到:
评论

相关推荐

    弹出有遮罩的拖动层,简单模拟select(未做界面)

    弹出有半透明遮罩的div层,可拖动。弹出层在窗口自适应居中,简单用div和li模拟下select的效果。

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...

    jsWindow 可拖动、最大化的仿Windows窗口

    内容索引:脚本资源,Ajax/JavaScript,仿Windows,窗口拖动 jsWindow 就一款纯JavaScript+CSS/DIV结合模拟的一组仿Windows窗口,修改CSS可以改变窗口风格,这组窗口都可以拖动、最大化、最小化,就像操作Windows的窗口...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...

    ExtAspNet_v2.3.2_dll

    -一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...

    超实用的jQuery代码段

    1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...

    JavaScript应用177例

    32.7.htm 一直弹出新窗口 第33章(\cha33) 代码说明: 1.代码33.1.htm须使用IE浏览器打开 2.代码33.2.htm须使用Mozilla Firefox浏览器打开 33.1.htm 使用IE处理XML 33.2.htm 使用...

    精通javascript

    • 10.9.htm 鼠标感应 弹出警告框 • 10.10.htm 鼠标感应 渐显图片 • 10.11.htm 禁用鼠标右键 第11章(\第11章) • 11.1.htm 省略window的alert&#40;&#41;方法 • 11.2....

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    9.18.htm 左键弹出式菜单效果的完整代码 9.19.htm 实现浮动菜单效果的完整代码 9.20.htm 实现树型导航菜单的完整代码 第10章(/C10/) ReturnText Ajax返回字符串数据 ReturnXML ...

    ASP.NET的网页代码模型及生命周期

    创建Application,首先需要新建项目用于开发Web Application,单击菜单栏上的【文件】按钮,在下拉菜单中选择【新建项目】选项,在弹出窗口中选择【ASP.NET应用程序】选项,如图4-5所示。 图4-5 创建ASP.NET应用...

    精通JavaScript

    • 10.9.htm 鼠标感应 弹出警告框 • 10.10.htm 鼠标感应 渐显图片 • 10.11.htm 禁用鼠标右键 第11章(\第11章) • 11.1.htm 省略window的alert()方法 • 11.2.htm 未...

    delphi 开发经验技巧宝典源码

    0223 怎样弹出ConnectionString设置页 148 0224 利用ADO获取DELETE后所影响的记录数 148 7.3 业务实现数据处理技术 149 0225 随机产生中奖号码 149 0226 使用快捷键保存数据 150 0227 密码只允许输入8位...

    delphi 开发经验技巧宝典源码06

    0223 怎样弹出ConnectionString设置页 148 0224 利用ADO获取DELETE后所影响的记录数 148 7.3 业务实现数据处理技术 149 0225 随机产生中奖号码 149 0226 使用快捷键保存数据 150 0227 密码只允许输入8位...

Global site tag (gtag.js) - Google Analytics