JS弹出层的显示与隐藏示例代码_javascript技巧

复制代码 代码如下:

<!--弹出层的显示与隐藏-->
<script type="text/javascript">
//弹出层的显示
//overlays:为遮罩层的ID
//wins:弹出层窗体的ID
//弹出层中用于拖动的ID
function popDIV_show(overlays,wins,wins_title) {
var oLays = documentgetElementById(overlays);
var oWins = documentgetElementById(wins);
var oWins_title = documentgetElementById(wins_title);
var bDrag = false;
var disX = disY = 0;
var w = "";
var n = 1;
if (n > 0) {
oLaysstyledisplay = "block";
oWinsstyledisplay = "block";
oWins_titleonmousedown = function(event) {
var event = event || windowevent;
bDrag = true;
disX = eventclientX - oWinsoffsetLeft;
disY = eventclientY - oWinsoffsetTop;
thissetCapture && thissetCapture();
return false
};
documentonmousemove = function(event) {
if (!bDrag)
return;
var event = event || windowevent;
var iL = eventclientX - disX;
var iT = eventclientY - disY;
var maxL = documentdocumentElementclientWidth
- oWinsoffsetWidth;
var maxT = documentdocumentElementclientHeight
- oWinsoffsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oWinsstylemarginTop = oWinsstylemarginLeft = 0;
oWinsstyleleft = iL + "px";
oWinsstyletop = iT + "px";
return false;
};
documentonmouseup = windowonblur = oWins_titleonlosecapture = function() {
bDrag = false;
oWins_titlereleaseCapture && oWins_titlereleaseCapture();
};
}
}
//弹出层的隐藏
//overlays:为遮罩层的ID
//wins:弹出层窗体的ID
function popDIV_hidden(overlays,wins) {
var oWins = documentgetElementById(wins);
var oLays = documentgetElementById(overlays);
oWinsstyledisplay = "none";
oLaysstyledisplay = "none";
}
</script>

时间: 2024-08-22 14:38:00

JS弹出层的显示与隐藏示例代码_javascript技巧的相关文章

JS弹出层的显示与隐藏示例代码

 关于JS弹出层的显示与隐藏,在网上可以搜到很多的类似教程,本文实现了一下,喜欢的朋友不要错过 代码如下: <!--弹出层的显示与隐藏-->  <script type="text/javascript">  //弹出层的显示  //overlays:为遮罩层的ID  //wins:弹出层窗体的ID  //弹出层中用于拖动的ID  function popDIV_show(overlays,wins,wins_title) {  var oLays = docu

JS弹出层单纯的绝对定位居中示例代码_javascript技巧

复制代码 代码如下: function doThis() { var a = document.getElementById("addYear"); a.style.left=(document.body.clientWidth/2-a.clientWidth/2)+"px"; a.style.top=(document.body.scrollTop+document.body.clientHeight/2-a.clientHeight/2)+"px&qu

js弹出层永远居中实现思路及代码_javascript技巧

弹出层窗口永远居中 复制代码 代码如下: <script type="text/javascript"> var isIE=window.XMLHttpRequest?false:true; var aIsIE={}; window.onload=function(){ if(isIE){ window.onscroll=doIE; window.onresize=doIE; } function doIE(){ aIsIE.top=document.documentEle

JS弹出层单纯的绝对定位居中示例代码

 这篇文章主要介绍了JS弹出层的绝对定位居中是如何实现的,需要的朋友可以参考下  代码如下: function doThis()  {  var a = document.getElementById("addYear");  a.style.left=(document.body.clientWidth/2-a.clientWidth/2)+"px";  a.style.top=(document.body.scrollTop+document.body.clie

js弹出层(jQuery插件形式附带reLoad功能)_javascript技巧

之前做一个项目,感觉里面的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改成jQuery的插件形式,并增加了reLoad的功能,感觉还不错,代码如下: 复制代码 代码如下: (function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$("#TB_overlay"); var height=$(document).height()+"px"; var width

js写一个弹出层并锁屏效果实现代码_javascript技巧

复制代码 代码如下: <!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=&qu

AlertBox 弹出层信息提示框效果实现步骤_javascript技巧

在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题. 此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新"包装",程序也改成组件的结构. 兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 http://demo.jb51.net/js/AlertBox/index.htm 程序说明 [实现原理] 弹出层的基本原理在仿Lightbox效果中已

JS 弹出层 定位至屏幕居中示例_javascript技巧

复制代码 代码如下: <!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=&qu

JS控制弹出悬浮窗口(一览画面)的实例代码_javascript技巧

在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu