javascript弹出新div层的有关问题
日期：2014-05-16 浏览次数：20336 次
javascript弹出新div层的问题
这是一个在弹出新div层的代码，新层可以移动，背景变暗。现在的问题是我想在一个页面多次调用这个层（我已经在css区分开id层，所以我估计不是<style>标签里的问题），问题来了，我调用的的层弹出来的大小都是和最后一个javascript里面设置的一样，我尝试调换他们的位置，不管怎么调换，弹出来的窗口都是以最后一个的大小一样，而且只有最后那个可以移动，其他的不可以移动了，我觉得是javascript里面判断id的问题，可是这个javascript部分我只找到“鼠标拖动”部分的“fd”可以改，单单改这个没用，请问高手这是怎么回事？我是初学者，很多不懂，完整代码如下：
<!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><style>
<!--
html,body{
height:100%;
}
* {
padding:0;
margin:0;
}
#upcontent {
list-style-position: outside;
list-style-image: none;
list-style-type: none;
}
#upcontent li {
font-size:12px;
color:#333;
line-height:150%;
}
#bodyL {
float:left;
width:84px;
margin-right:2px;
}
#tittleup {
font-size:14px;
font-weight:bold;
padding-left:25px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d0daec;
margin-bottom: 10px;
padding-bottom: 10px;
}
a.od {
float:right;
font-size:14px;
text-decoration: none;
}
a.od:hover {
color:#FF0000;
}
#fd {
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
cursor:move;
float:left;/*filter:alpha(opacity=50);*/
z-index: 10;
}
.contentup {
padding:20px;
}
}
--></style>
<title>tcc</title>
</head>
<body >
<div id="bodyL"> <a href="#" onclick = "show('fd',event);return false;"> 欢迎</a> </div>
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="contentup"> <a href="#" class="od" onclick = "closeed('fd');return false;"> 关闭 </a>
<div id="tittleup">百度</div>
<ul id="upcontent">
<li>您现在来到的网站是百度（www.baidu.com），本站热烈欢迎您的到来，谢谢支持我们。</li>
</ul>
</div>
</div>
<script> var prox;
var proy;
var proxc;
var proyc;
var isIe=(document.all)?true:false;
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop -
document.body.clientTop
};
}
//关闭
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
function show(id,ev){/*--打开--*/
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight)<592?592:parseInt
(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
这是一个在弹出新div层的代码，新层可以移动，背景变暗。现在的问题是我想在一个页面多次调用这个层（我已经在css区分开id层，所以我估计不是<style>标签里的问题），问题来了，我调用的的层弹出来的大小都是和最后一个javascript里面设置的一样，我尝试调换他们的位置，不管怎么调换，弹出来的窗口都是以最后一个的大小一样，而且只有最后那个可以移动，其他的不可以移动了，我觉得是javascript里面判断id的问题，可是这个javascript部分我只找到“鼠标拖动”部分的“fd”可以改，单单改这个没用，请问高手这是怎么回事？我是初学者，很多不懂，完整代码如下：
<!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><style>
<!--
html,body{
height:100%;
}
* {
padding:0;
margin:0;
}
#upcontent {
list-style-position: outside;
list-style-image: none;
list-style-type: none;
}
#upcontent li {
font-size:12px;
color:#333;
line-height:150%;
}
#bodyL {
float:left;
width:84px;
margin-right:2px;
}
#tittleup {
font-size:14px;
font-weight:bold;
padding-left:25px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d0daec;
margin-bottom: 10px;
padding-bottom: 10px;
}
a.od {
float:right;
font-size:14px;
text-decoration: none;
}
a.od:hover {
color:#FF0000;
}
#fd {
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
cursor:move;
float:left;/*filter:alpha(opacity=50);*/
z-index: 10;
}
.contentup {
padding:20px;
}
}
--></style>
<title>tcc</title>
</head>
<body >
<div id="bodyL"> <a href="#" onclick = "show('fd',event);return false;"> 欢迎</a> </div>
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="contentup"> <a href="#" class="od" onclick = "closeed('fd');return false;"> 关闭 </a>
<div id="tittleup">百度</div>
<ul id="upcontent">
<li>您现在来到的网站是百度（www.baidu.com），本站热烈欢迎您的到来，谢谢支持我们。</li>
</ul>
</div>
</div>
<script> var prox;
var proy;
var proxc;
var proyc;
var isIe=(document.all)?true:false;
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop -
document.body.clientTop
};
}
//关闭
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
function show(id,ev){/*--打开--*/
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight)<592?592:parseInt
(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
