javascript 弹出div窗体
来源：互联网 发布：webapi 连接数据库 编辑：程序博客网 时间：2024/05/22 06:46
<!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=gb2312" />
<title>无标题文档</title>
<style>
<!--
.aaa{
position:absolute;
display:none;
width:300px;
height:130px;
background-color:#FFFFFF;
border:1px #CCCCCC solid;
}
.b{
height:20px;
text-align:right;
font-size:12px;
border-bottom:1px #CCCCCC solid;
line-height:20px;
width:94%;
float:left;
text-align:center;
cursor:hand;
}
.c{
height:20px;
text-align:right;
font-size:12px;
border-bottom:1px #CCCCCC solid;
line-height:20px;
width:5%;
float:left;
}
.d{
font-size:12px;
padding:10px;
line-height:23px;
}
.e{
width:100%;
height:20px;
line-height:20px;
text-align:center;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body >
<!----------------链接一-------------------->
<table>
<tr>
<td style="width:300px"></td>
<td>
<a href="#" onClick="javascript:divop('test1','show',1);" />链接1</a>
<a href="#" onClick="javascript:divop('test2','show',2);" />链接2</a>
<a href="#" onClick="javascript:divop('test3','show',3);" />链接3</a>
<a href="#" onClick="javascript:divop('test4','show',4);" />链接4</a>
</td></tr>
</table>
</p>
<div id="test1" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test1','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test1','hid');" /></div>
</div>
<div id="test2" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test2','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test2','hid');" /></div>
</div>
<div id="test3" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test3','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test3','hid');" /></div>
</div>
<div id="test4" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test4','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test4','hid');" /></div>
</div>
<script language="javascript">
function $(id)
{
return document.getElementById(id);
}
function divop(objid,stat,num)//控制层的显示和隐藏
{
//alert(objid);
if (stat=="show")
{
$(objid).style.display="block";
$(objid).style.left=(event.clientX-300)+"px";//
$(objid).style.top=event.clientY+"px";
}
else
{
$(objid).style.display="none";
}
}
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
<!--
.aaa{
position:absolute;
display:none;
width:300px;
height:130px;
background-color:#FFFFFF;
border:1px #CCCCCC solid;
}
.b{
height:20px;
text-align:right;
font-size:12px;
border-bottom:1px #CCCCCC solid;
line-height:20px;
width:94%;
float:left;
text-align:center;
cursor:hand;
}
.c{
height:20px;
text-align:right;
font-size:12px;
border-bottom:1px #CCCCCC solid;
line-height:20px;
width:5%;
float:left;
}
.d{
font-size:12px;
padding:10px;
line-height:23px;
}
.e{
width:100%;
height:20px;
line-height:20px;
text-align:center;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body >
<!----------------链接一-------------------->
<table>
<tr>
<td style="width:300px"></td>
<td>
<a href="#" onClick="javascript:divop('test1','show',1);" />链接1</a>
<a href="#" onClick="javascript:divop('test2','show',2);" />链接2</a>
<a href="#" onClick="javascript:divop('test3','show',3);" />链接3</a>
<a href="#" onClick="javascript:divop('test4','show',4);" />链接4</a>
</td></tr>
</table>
</p>
<div id="test1" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test1','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test1','hid');" /></div>
</div>
<div id="test2" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test2','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test2','hid');" /></div>
</div>
<div id="test3" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test3','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test3','hid');" /></div>
</div>
<div id="test4" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test4','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test4','hid');" /></div>
</div>
<script language="javascript">
function $(id)
{
return document.getElementById(id);
}
function divop(objid,stat,num)//控制层的显示和隐藏
{
//alert(objid);
if (stat=="show")
{
$(objid).style.display="block";
$(objid).style.left=(event.clientX-300)+"px";//
$(objid).style.top=event.clientY+"px";
}
else
{
$(objid).style.display="none";
}
}
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>
</body>
</html>
- javascript 弹出div窗体
- JavaScript 用DIV模拟弹出窗口并跟随窗体滚动
- JavaScript弹出窗体
- javascript 弹出div实例
- JAVASCRIPT弹出DIV
- 使用JavaScript弹出各种窗体
- 使用JavaScript弹出各种窗体
- javascript弹出模态窗体
- div弹出窗体，可移动，可关闭
- 标题判断-折叠效果-div弹出窗体
- JavaScript Div 弹出层 遮罩层
- javascript to fullscreen(js弹出窗体)
- JavaScript 弹出子窗体并返回结果到父窗体
- jsp通过div实现覆盖，弹出新窗体
- 用DIV模拟弹出窗口－－窗体滚动跟随
- Javascript弹出带关闭的DIV层
- Javascript+div+css(滤镜)弹出窗口
- JavaScript弹出窗口DIV层效果代码
- 如何往IE工具条添加按钮
- JavaScript如何将json字符串转化为数组
- Mutex的简单封装
- java基础
- 如何在应用程序忙碌时探测用户的按健
- javascript 弹出div窗体
- js技巧--转义符"\"的妙用
- Asp.net 自动发送邮件的方法
- Twitter(二）
- Jquery : 上下滚动--单行 批量多行 文字图片翻屏
- 介绍一个直接浏览微软知识库文章的工具
- WIFI 认证 测试
- 开发实现本地接口的无状态的会话bean
- VC Studio 使用技巧大全
