`
awaitdeng
  • 浏览: 216572 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JS与DIV弹出层实例!

阅读更多
为了设计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">
&nbsp;&nbsp;选择时间
</div>
<div class="pop_title_right">
<label title="关闭此窗口" onclick="xingZQYTree.style.display='none';">
&nbsp;X&nbsp;
</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;"/>
&nbsp;至&nbsp;<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 style="margin-top: 15px;margin-bottom: 20px;"><a href="#" onclick="showValue();"  style="margin-left: 20px;margin-right: 20px;margin-top: 15px;"> </a></div>-->

</div>
</div>
</body>
</html>
分享到:
评论

相关推荐

    div 弹出层

    在本案例中,"div弹出层"指的是使用`div`元素来实现的弹出窗口或对话框功能。这种技术广泛应用于各种网页交互场景,如信息提示、用户确认、表单提交等。 弹出层通常通过CSS(层叠样式表)来控制其外观,包括尺寸、...

    JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口

    JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...

    JAVASCRIPT弹出DIV层窗口实例

    在本实例中,我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先,我们需要了解HTML结构。`index.htm`和`test.html`文件可能包含了用于展示弹出窗口的基础HTML元素。通常,一个基本的HTML结构会包括...

    javascript+html弹出层实例

    当我们谈论“javascript+html弹出层实例”时,我们通常是指在网页中实现一种可浮动、可自定义的对话框,这种对话框会在用户交互时突然出现,显示额外的信息或功能,如图片、文字或整个 div 元素。这种弹出层效果极大...

    JS做的隐藏与显示DIV可拖动弹出层

    在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中,我们将探讨如何利用JavaScript来创建一个可拖动的弹出层,并控制其显示与隐藏。 首先,让我们理解`div`层的隐藏与显示。在HTML中,我们创建一个`div`元素并为其...

    几种网页弹出层的实例

    网页弹出层是网页设计中...通过学习和理解这些弹出层实例,开发者可以提升自己的网页交互设计能力,为用户提供更加直观、高效的使用体验。同时,也可以根据项目需求,自定义弹出层样式和功能,满足多样化的交互需求。

    js超漂亮的仿腾讯弹出层效果实例源码

    在JavaScript编程领域,弹出层(也称为模态对话框或弹窗)是一种常见的用户界面设计元素,用于在用户与主页面交互时显示额外信息或进行特定操作。本实例是基于JavaScript实现的一个“超漂亮的仿腾讯弹出层效果”,...

    javascript div弹出窗口 可封装为JS类

    在JavaScript编程中,"div弹出窗口"是一种常见的交互式设计,它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术常被用于显示警告、提示、对话框或者加载内容丰富的模块,如图片画廊、表单等。在本...

    jquery弹出层实例源码

    **jQuery弹出层实例源码详解** 在网页开发中,弹出层(也称为模态窗口或对话框)是一种常用的设计元素,它可以在用户与页面交互时提供额外的信息或者功能。`jQuery`作为一款轻量级、功能丰富的JavaScript库,为创建...

    JQuery PopupDiv 弹出层插件 v1.0

    《JQuery PopupDiv 弹出层插件 v1.0:深入解析与应用》 在Web开发中,弹出层(Popup Div)是一种常见的交互设计元素,它可以在用户与页面交互时提供额外的信息或者功能区域。JQuery PopupDiv 插件就是这样一个专为...

    漂亮的js可移动弹出层

    总的来说,"漂亮的js可移动弹出层"是一个结合了JavaScript和jQuery技术的交互设计实例,它通过优雅的代码和精心设计的用户界面,提高了网站的可用性和吸引力。开发者可以通过研究这些文件,学习如何创建类似的弹出层...

    div弹出层实现单选功能

    总结,"div弹出层实现单选功能"是一个结合HTML、CSS、JavaScript(或jQuery)以及可能的Ajax技术的实践案例,它能够为用户提供一个更直观、更灵活的选择方式,尤其适用于选项较多的情况。通过这个实例,我们可以学习...

    弹出层示例DivShow

    综上所述,"DivShow"示例是一个综合运用HTML、CSS和JavaScript创建弹出层的实例,旨在提供一种优雅地显示额外内容或功能的方法,同时考虑到与下拉列表的兼容性和用户体验的优化。通过学习和理解这个示例,开发者可以...

    js实现div弹出层的方法

    在JavaScript中,实现一个div弹出层是一项...以上就是使用JavaScript实现div弹出层的完整方法,这个实例不仅提供了基本的弹出功能,还考虑了用户体验,如拖拽和自定义显示效果,对于Web开发者来说具有很高的实用价值。

    js 弹出层之间值得传递

    在JavaScript(JS)开发中,弹出层常用于显示详细信息、用户输入或者进行操作确认,它们通常是页面上的浮动元素,可以覆盖一部分或全部主页面内容。实现弹出层之间的值传递是提升用户体验和功能交互性的重要手段。...

    jquey弹出层背景置灰不能操作实例

    本实例重点讨论如何利用jQuery实现弹出层(modal)功能,并将背景置灰,使用户在弹出层显示时无法与背景元素交互。通过这个实例,我们可以学习到以下几个关键知识点: 1. **jQuery 弹出层**:jQuery 弹出层通常是...

    弹出层示例展示

    这个"弹出层示例展示"显然是一个教学或演示如何实现弹出层的实例,特别提到了与`iframe`的父子关系,这意味着它可能涉及到了`iframe`嵌套以及与父页面的通信。 弹出层通常通过JavaScript、jQuery或其他前端库来创建...

    JS_div.rar_JS_div_js_弹出层

    在JavaScript的世界里,`div`元素经常被用来作为页面布局的基础,而动态的弹出层效果则能够增强用户的交互体验。本教程将深入探讨如何利用JavaScript实现`div`的动态弹出与折叠功能。 首先,我们需要理解`div`元素...

    html div 布局 弹出层 大全

    5. **Dialog.js**:可能是一个用于创建弹出层的JavaScript库,它可能包含了弹出层的打开、关闭、动画效果以及与HTML元素的交互逻辑。使用时,需要引入该脚本文件,并按照文档指示进行配置和调用。 6. **图片与图片...

Global site tag (gtag.js) - Google Analytics