JS与DIV弹出层实例！ -

awaitdeng

浏览: 214081 次
性别:
来自: 广州

最近访客更多访客>>

terui668

ztcwh

red_scard

唯一的色彩

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JS与DIV弹出层实例！

博客分类：

JS DIV

DIV css UI XHTML JavaScript

为了设计GPS地图显示轨迹程序为了查询某段时间的轨迹而想设计一个弹窗对话层

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>hihi</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/**
* 弹出层css
*/
.pop {
width: 80%;
border: 1px #96D1DF solid;
background: #fff;
padding: 1px;
color: #333;
position: absolute;
top: 15%;
left: 15%;
height: auto;
z-index: 10
}

/**
* 弹出层css
*/
.pop_ {
width: 80%;
border: 1px #96D1DF solid;
background: #fff;
padding: 1px;
color: #333;
position: absolute;
top: 15%;
left: 15%;
height: auto;
z-index: 10
}

.pop_title {
float: left;
width: 100%;
height: 24px;
line-height: 24px;
/* background: #ecf9ff url ('../images/title_move.gif') center no-repeat; */
background: #ecf9ff;
border-bottom: 1px #d3ecf3 solid;
color: #444;
font-weight: bold
}

.pop_title_left {
float: left;
width: 90%;
overflow: hidden;
text-indent: 6px;
cursor: move
}

.pop_title_left img {
float: left;
border: 0;
margin: 10px 0 0 5px
}

.pop_title_right {
width: 5%;
float: right;
text-align: right;
cursor: pointer
}

.pop_title_right_print {
width: 3%;
float: left;
text-align: right
}

.pop_title_right img {
margin: 5px 10px 5px 10px;
cursor: pointer
}

.pop_title_right_print img {
margin: 5px 10px 5px 10px;
cursor: pointer
}

.pop_content {
float: left;
width: 100%;
margin: 1px 0 50 0;
font-size: 14px
}

.pop_function {
float: left;
width: 100%;
height: 30px;
line-height: 30px;
border-top: 1px #fff solid;
text-align: center
}

.pop_search {
width: 100%;
height: 35px;
border-top: 1px #fff solid;
text-align: center;
font-size: 12px;
font-weight: bold;
margin: 5px 0 5px 0;
border-bottom: 3px #96D1DF dotted;
}

.pop_page {
width: 100%;
height: 25px;
text-align: center;
font-size: 12px;
border-top: 3px #96D1DF dotted;
vertical-align: middle;
}
</style>
<script type='text/javascript' src='<%=basePath%>/My97DatePicker/WdatePicker.js'></script>
<script>
function getxy(e) {
var a = new Array();
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
a[0] = t;
a[1] = l;
a[2] = w;
a[3] = h;
return a;
}
//----------------------------------
var DragForAll = {};
function _enableDragForAll(e, toMoveObj, obj2, obj3) {
if (DragForAll.o) {
return false;
}
var clickObj = document.getElementById(toMoveObj);
if (!clickObj) {
return;
}
DragForAll.o = clickObj;
if (document.getElementById(obj2)) {
DragForAll.p = document.getElementById(obj2);
}
DragForAll.xy = getxy(DragForAll.o);
e = e || event;
if (!clickObj.style.left) {
DragForAll.xx = new Array((e.x - DragForAll.xy[1]), (e.y - DragForAll.xy[0]));
} else {
DragForAll.xgap = parseInt(clickObj.style.left.substring(0, clickObj.style.left.indexOf("px")));
DragForAll.ygap = parseInt(clickObj.style.top.substring(0, clickObj.style.top.indexOf("px")));
DragForAll.xx = new Array((e.x - DragForAll.xgap), (e.y - DragForAll.ygap));
DragForAll.xgap -= DragForAll.xy[1];
DragForAll.ygap -= DragForAll.xy[0];
}
DragForAll.fitToCont = obj3;
if (obj3) {
DragForAll.fitArea = getxy(DragForAll.fitToCont);
}
return false;
}
function _DragObjForAll(e) {
if (!DragForAll.o) {
return;
}
e = e || event;
var old_left = e.x - DragForAll.xx[0];
var old_top = e.y - DragForAll.xx[1];
if (DragForAll.fitToCont) {
if ((old_left - DragForAll.xgap) - DragForAll.fitArea[1] <= 0 || old_top - DragForAll.ygap - DragForAll.fitArea[0] <= 0) {
return;
}
if (old_left - DragForAll.xgap + DragForAll.xy[2] >= DragForAll.fitArea[1] + DragForAll.fitArea[2] || old_top - DragForAll.ygap + DragForAll.xy[3] >= DragForAll.fitArea[0] + DragForAll.fitArea[3]) {
return;
}
}
DragForAll.o.style.left = old_left + "px";
DragForAll.o.style.top = old_top + "px";
if (DragForAll.p) {
DragForAll.p.style.left = (old_left + 5) + "px";
DragForAll.p.style.top = (old_top + 5) + "px";
}
}
function _releaseDragObjForAll(e) {
DragForAll = {};
}
document.onmousemove = function (e) {
_DragObjForAll(e);
};
document.onmouseup=function(e){
_releaseDragObjForAll(e);
e=e||event;
}

function showValue(){
       var v1 =document.getElementById("d241").value;
       var v2 =document.getElementById("d233").value;
       document.getElementById("xingZQYTree").style.display='none';
       alert(v1+v2);
   }
</script>
</head>
<body>
<input type="button" value="弹出DIV窗口"
onclick="xingZQYTree.style.display='';xingZQYTree.style.top=event.clientY;xingZQYTree.style.left=event.clientX" />

<div id="xingZQYTree" class="pop"
style="display: none; width: 480px; overflow: auto; position: absolute; background-color: #FFFFFF; border: 1px solid #0099CC; padding-left: 0px">
<div id="pop_title" class="pop_title"
onmousedown="_enableDragForAll(event,'xingZQYTree');" title='按住鼠标可随意拖动此窗口'>
<div class="pop_title_left" style="font-size: 14px">
  选择时间
</div>
<div class="pop_title_right">
<label title="关闭此窗口" onclick="xingZQYTree.style.display='none';">
 X 
</label>
</div>
</div>
<div class="pop_content">
<div>
<input type="text" id="d241" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" style="width:159px;margin-left: 20px;margin-top: 15px;"/>
 至 <input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" style="width:159px;margin-right: 15px;margin-top: 15px;"/>
     <a href="#" onclick="showValue();" style="margin-right: 20px;">查询轨迹</a>
</div>


</div>
</div>
</body>
</html>

分享到：