js 弹出浮动层

<!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>js 弹出浮动层</title>
<script language="网页特效">
function openlayer(objid,conid,reps教程tafferpropname){
var arraypagesize = getpagesize();//调用getpagesize()函数
var arraypagescroll = getpagescroll();//调用getpagescroll()函数
if (!document.getelementbyid("popupaddr")){
//创建弹出内容层
var popupdiv = document.createelement("div");
//给这个元素设置属性与样式
popupdiv.setattribute("id","popupaddr")
popupdiv.style.position = "absolute";
popupdiv.style.border = "4px solid #89b4ed";
popupdiv.style.background = "#fff";
popupdiv.style.zindex = 99;
//创建弹出背景层
var bodyback = document.createelement("div");
bodyback.setattribute("id","bodybg")
bodyback.style.position = "absolute";
bodyback.style.width = "100%";
bodyback.style.height = (arraypagesize[1] + 35 + 'px');
bodyback.style.zindex = 98;
bodyback.style.top = 0;
bodyback.style.left = 0;
bodyback.style.filter = "alpha(opacity=50)";
bodyback.style.opacity = 0.5;
bodyback.style.background = "#dfe9f9";
//实现弹出(插入到目标元素之后)
var mybody = document.getelementbyid(objid);
insertafter(popupdiv,mybody);//执行函数insertafter()
insertafter(bodyback,mybody);//执行函数insertafter()
}
//显示背景层
document.getelementbyid("bodybg").style.display = "";
//显示内容层
var popobj=document.getelementbyid("popupaddr")
popobj.innerhtml = document.getelementbyid(conid).innerhtml;
popobj.style.display = "";
//让弹出层在页面中垂直左右居中(统一)
// popobj.style.width = "600px";
// popobj.style.height = "400px";
// popobj.style.top = arraypagescroll[1] + (arraypagesize[3] - 35 - 400) / 2 + 'px';
// popobj.style.left = (arraypagesize[0] - 20 - 600) / 2 + 'px';
//让弹出层在页面中垂直左右居中(个性)
var arrayconsize=getconsize(conid)
popobj.style.top = arraypagescroll[1] + (arraypagesize[3] - arrayconsize[1]) / 2-50 + 'px';
popobj.style.left = (arraypagesize[0] - arrayconsize[0]) / 2 -30 + 'px';
}
</script>
</head>

<body>
</body>
</html>

时间： 2024-08-02 01:07:24

js 弹出浮动层的相关文章

两款漂亮js 弹出提示层代码

function fromid(id) { return document.getelementbyid(id); } function show_alert(msg, type, time) { var layer_obj = fromid("alert_layer"); var layer_text= fromid("alert_text"); var line_height = (document.documentelement.scrolltop == 0)

js弹出隐藏层代码

按钮1 按钮2 按钮3 关闭 111111111111111111111111 关闭 22222222222222222222222 关闭 333333333333333333

JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解_javascript技巧

本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n

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

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

使用js实现关闭js弹出层的窗口

本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 <script type="text/javascript"> function toggle() { theObj = document.getElementById('Sunyanzi').style; if ( theObj.display == "none" ) theObj.display = "block&

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弹出可拖拽可关闭的div层完整实例

这篇文章主要介绍了JS弹出可拖拽可关闭的div层完整实现方法,包括对div弹出层的样式及功能的实现技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

JS弹出可拖拽可关闭的div层完整实例_javascript技巧

本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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/xh

JS弹出层遮罩,隐藏背景页面滚动条细节优化分析_javascript技巧

一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关. body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下