`

怎么样让弹出的DIV显示在网页的中间？

 
阅读更多

怎么样让弹出的DIV显示在网页的中间？   

2010-10-09 17:23:12 |  分类： ASP.NET+SQL+HTML | 字号   订阅

<!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>
* {margin:0;}
body {font-size:12px;}
#container div{margin-top:5px;}
#select_city h3{float:left;}
#main_city,#all_province {clear:both;}
#main_city div,#all_province div{width:600px;clear:left;}
#main_city h4,#all_province h4{float:left;display:inline;font-size:16px;}
#main_city div span,#all_province div span{margin:0 10px;cursor:pointer;font-size:12px;}
#float_lay{width:200px;height:120px;border:1px #d1d1d1 solid;position:absolute;background:#fff;z-index:999;display:none;}
</style>
<script type="text/javascript">
//弹出层
function openLayer(objId,conId){
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 = "1px solid #ccc";
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 = "#ddf";

//实现弹出(插入到目标元素之后)
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';
}
//获取内容层内容原始尺寸
function getConSize(conId){
var conObj=document.getElementById(conId)
conObj.style.position = "absolute";
conObj.style.left=-1000+"px";
conObj.style.display="";
var arrayConSize=[conObj.offsetWidth,conObj.offsetHeight]
conObj.style.display="none";
return arrayConSize;
}
function insertAfter(newElement,targetElement){//插入
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
//获取滚动条的高度
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}
//获取页面实际大小
function getPageSize(){
var xScroll,yScroll;

if (window.innerHeight && window.scrollMaxY){
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
sScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth,windowHeight;
//var pageHeight,pageWidth;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

var pageWidth,pageHeight
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
//关闭弹出层
function closeLayer(){
document.getElementById("popupAddr").style.display = "none";
document.getElementById("bodybg").style.display = "none";
return false;
}
</script>
</head>
<body>
<input name="test" id="test" value="风格设置" type="button" onclick="openLayer('test','test_con')" />
<!--第一个弹出层的内容-->
<div id="test_con" style="display:none" title="包含弹出层的内容的容器">
<div id="tab">
<div id="tabtop">
<div id="tabtop-L"><strong>风格设置</strong></div>
<div id="tabtop-R" onclick="closeLayer()"><strong>关闭</strong></div>
</div>
<div id="tabcontent">此处显示内容</div>
</div>
</div>
<br>
<br>
<br>
<input name="Input" id="test2" value="风格提示" type="button" onclick="openLayer('test2','test_con2')" />
<!--第二个弹出层的内容-->
<div id="test_con2" style="display:none" title="包含弹出层的内容的容器">
<div id="tab2">
<div id="tabtop2">
<div id="tabtop-L2"><strong style="color:blue">设置提示</strong></div>
<div id="tabtop-R2" onclick="closeLayer()"><strong style="color:red">关闭</strong></div>
</div>
<div id="tabcontent2" style="color:#dff;background:#000">
<p>此处显示提示内容"
<p>提示1
<p>提示2
</div>
</div>
</div>
<br>
<br>
<br>
<input name="Input" id="test3" value="风格演示" type="button" onclick="openLayer('test3','test_con3')" />
<!--第三个弹出层的内容-->
<div id="test_con3" style="display:none" title="包含弹出层的内容的容器">

分享到：
| DIV固定在屏幕的中间/两侧,不随滚动条移 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    在一个网页中间弹出窗口

    ### 在网页中间弹出窗口的知识点解析 #### 一、网页弹窗的实现方式与应用场景 在现代网页设计中，弹窗（模态对话框）是一种常见的交互元素，用于显示临时性的信息或提示用户进行某种操作。弹窗的实现不仅能够提升...

    网页弹出div层的js-javascript

    网页弹出div层的技术在网页开发中非常常见，主要用于创建模态对话框、提示信息或者加载新内容。这种技术利用JavaScript进行实现，结合HTML和CSS，可以为用户提供丰富的交互体验。下面将详细介绍如何使用js-...

    juqery实现div弹出居中

    在网页设计中，让一个div元素在页面上弹出并居中是一项常见的需求，尤其是在创建模态对话框、提示信息或者加载窗口时。jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化这种操作。本文将深入探讨如何使用...

    jQuery点击遮罩弹出层固定网页中间

    遮罩层通常是一个半透明的黑色背景，覆盖在整个网页上，用于突出显示特定的区域或元素，如弹出框或模态窗口。它可以帮助提高用户体验，使用户专注于当前显示的重要信息，而不是其他分散注意力的内容。 实现这一功能...

    中间弹出层js

    【中间弹出层js】是一种常见的网页交互设计技术，它利用JavaScript和jQuery库来实现页面元素（通常是模态框或对话框）从屏幕中央向四周展开的动态效果。这种效果可以用于显示重要的通知、用户确认操作或者展示详细...

    网页内弹出广告.zip

    这种效果可以提供一种沉浸式的体验，让用户专注于弹出的内容，而不是网页的背景。 在"网页内弹出广告.zip"这个压缩包中，可能包含了一个名为"jiaoben18173"的文件，这通常是一个JavaScript代码示例或者是一个HTML...

    jquery实现弹出div,始终显示在屏幕正中间的简单实例

    本篇内容将通过一个实例，向你介绍如何利用jquery来实现一个始终固定在屏幕正中间的弹出div元素。 首先，了解HTML和CSS的基础知识是完成这个任务的前提。HTML用来定义和创建结构，比如弹出的div元素；而CSS负责样式...

    弹出在网页中间跳动的窗口

    在网页设计中，实现"弹出在网页中间跳动的窗口"的效果，通常涉及到JavaScript、CSS以及HTML等前端技术的应用。这种技术常用于吸引用户的注意力，例如显示广告、通知或者重要提示信息。以下是对这个主题的详细解释： ...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    6. **自动居中**：在弹出层显示时，可以通过获取窗口大小和弹出层大小，动态计算并设置`left`和`top`属性，使弹出层始终位于页面中间。 7. **关闭机制**：通常还会提供一个关闭按钮或点击其他区域关闭弹出层的功能...

    jQuery显示弹出层

    弹出层在网页设计中被称为模态对话框或模态窗口，它会阻止用户与页面其余部分的交互，直到用户关闭弹出层。 在实现一个点击后的jQuery弹出层时，通常包括以下几个步骤： 1. **HTML结构**：首先，我们需要在HTML...

    网站弹出客服代码

    例如，在这个"3秒弹出客服"的场景下，代码可能包含一个计时器，当页面加载3秒后自动显示客服对话框。 HTML则负责构建弹出客服窗口的基础结构，包括窗口的布局、按钮、输入框等元素。例如，HTML可能会定义一个隐藏的...

    Jquery实现iframe弹出层，简单实用

    这些样式将使弹出层覆盖整个屏幕，并且中间有一个无边框的iframe显示内容。 最后，将CSS文件链接到HTML文档中： ```html ``` 现在，当你点击`#open-btn`按钮时，一个包含指定URL内容的弹出层将会显示出来。点击弹...

    最中间弹出对话框,遮罩层 可以拖动

    1. **中间弹出对话框**：要让对话框始终位于页面中央，我们需要计算窗口大小和对话框的大小，然后设置对话框的位置。这通常通过CSS和JavaScript配合实现。CSS用来定义对话框的基本样式，如边框、背景、阴影等；...

    JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

    最后，为了让div显示出来，我们将它的`display`样式设置为`block`： ```javascript res.style.display = 'block'; ``` 如果用户点击的是鼠标左键或中间键，我们需要隐藏div，因此添加一个`else`分支： ```...

    不错的弹出层居中效果锁定屏幕

    在提供的压缩包文件"点击弹出div居中显示"中，可能包含了实现这一效果的具体HTML和CSS代码示例。新手开发者可以学习这个示例，理解其工作原理，然后根据自己的项目需求进行调整和扩展。 此外，这个解决方案可能还...

    网站前端——登录按钮，点击弹出层

    同时，弹出层的HTML结构通常会包含一个`&lt;div&gt;`元素，用`display:none`初始隐藏，当点击按钮时，通过JavaScript改变其显示状态。 2. **CSS**: CSS（层叠样式表）用于美化网页和控制元素的布局。对于登录按钮，我们...

    js实现点击图片在屏幕中间弹出放大效果

    在网页设计中，有时我们需要为用户提供一种交互体验，比如点击图片后在屏幕中间弹出一个放大版的图片。这个功能可以提升用户体验，特别是在展示产品细节或者高质量图像时。本篇文章将详细讲解如何使用JavaScript...

    HTML+JS 显示二维码_html_二维码_显示二维码_

    在网页上显示二维码是一项常见的需求，特别是在嵌入式系统中，它可以方便地将链接、文本信息等转换为可扫描的图像。本教程将详细介绍如何利用HTML和JavaScript来实现这一功能。 首先，理解二维码（Quick Response ...

    CSS_DIV设计模板

    - **下拉及多级弹出式菜单**：教程13和14深入讲解了下拉菜单的制作，包括多级弹出，这在大型网站中极为常见，提高用户的导航效率。 4. **网页标准版式布局**： - **div+css模板下载**：在“div+css网页标准版式...

Magicbox
Global site tag (gtag.js) - Google Analytics